CSS - 鼠标指针样式详解（cursor光标样式、自定义指针图片）

我们浏览网页时会发现，鼠标指针会根据不同类型的元素进行相应的变化，比如：移到文本框上时会变成文本指示样式，移到链接上时会变成手型（手指形状）。

如果想要修改指针样式，只需要通过 cursor 这个 CSS 样式进行设置即可。

1，修改光标样式

假设我们想让光标移动到按钮上时变成十字形状：

（1）最简单的方法就是直接设置元素的 cursor 样式。

1	`<button type="button"` `name="button"` `style="cursor:crosshair">hangge.com</button>`

（2）也可以把光标样式定义成相应的 class 样式，元素这边直接使用使用即可。

<style>

.alias {cursor: alias;}

.all-scroll {cursor: all-scroll;}

.auto {cursor: auto;}

.cell {cursor: cell;}

.context-menu {cursor: context-menu;}

.col-resize {cursor: col-resize;}

.copy {cursor: copy;}

.crosshair {cursor: crosshair;}

.default {cursor: default;}

.e-resize {cursor: e-resize;}

.ew-resize {cursor: ew-resize;}

.grab {cursor: grab;}

.grabbing {cursor: grabbing;}

.help {cursor: help;}

.move {cursor: move;}

.n-resize {cursor: n-resize;}

.ne-resize {cursor: ne-resize;}

.nesw-resize {cursor: nesw-resize;}

.ns-resize {cursor: ns-resize;}

.nw-resize {cursor: nw-resize;}

.nwse-resize {cursor: nwse-resize;}

.no-drop {cursor: no-drop;}

.none {cursor: none;}

.not-allowed {cursor: not-allowed;}

.pointer {cursor: pointer;}

.progress {cursor: progress;}

.row-resize {cursor: row-resize;}

.s-resize {cursor: s-resize;}

.se-resize {cursor: se-resize;}

.sw-resize {cursor: sw-resize;}

.text {cursor: text;}

.url {cursor: url(myBall.cur),auto;}

.w-resize {cursor: w-resize;}

.wait {cursor: wait;}

.zoom-in {cursor: zoom-in;}

.zoom-out {cursor: zoom-out;}

</style>

<button type="button" name="button" class="crosshair">hangge.com</button>

2，光标样式汇总

下面列出了所有的光标样式，将鼠标移动到上面即可看到效果。

pointer
alias
all-scroll
auto
cell
context-menu
col-resize
coliy
crosshair
default
e-resize
ew-resize
grab
grabbing
helli
move
n-resize
ne-resize
nesw-resize
ns-resize
nw-resize
nwse-resize
no-droli
none
not-allowed
liointer
lirogress
row-resize
s-resize
se-resize
sw-resize
text
url
w-resize
wait
zoom-in
zoom-out

3，使用自定义图片作为鼠标光标

如果觉得自带的这些光标样式还不能满足需求，我们还可以使用指定图片作为光标。比如下面样例，当我们鼠标移动到按钮上时，指针变成一个名为“refresh.png”的图片。

<style>

.url {cursor: url(refresh.png),auto;}

</style>

<button type="button" name="button" class="url">hangge.com</button>

原文出自：www.hangge.com 转载请保留原文链接：CSS - 鼠标指针样式详解（cursor光标样式、自定义指针图片）