CSS - 鼠标指针样式详解（cursor光标样式、自定义指针图片）
作者：hangge | 2018-05-16 08:10
我们浏览网页时会发现，鼠标指针会根据不同类型的元素进行相应的变化，比如：移到文本框上时会变成文本指示样式，移到链接上时会变成手型（手指形状）。
如果想要修改指针样式，只需要通过 cursor 这个 CSS 样式进行设置即可。
1，修改光标样式
假设我们想让光标移动到按钮上时变成十字形状：
（1）最简单的方法就是直接设置元素的 cursor 样式。
<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
- 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>
全部评论（0）