CSS - 鼠标指针样式详解(cursor光标样式、自定义指针图片)
我们浏览网页时会发现,鼠标指针会根据不同类型的元素进行相应的变化,比如:移到文本框上时会变成文本指示样式,移到链接上时会变成手型(手指形状)。

如果想要修改指针样式,只需要通过 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>