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

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

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

1，修改光标样式

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<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”的图片。

1 2 3 4 5

<style>   .url {cursor: url(refresh.png),auto;} </style> <button type="button" name="button" class="url">hangge.com</button>

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