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

如果想要修改指针样式，只需要通过 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光标样式、自定义指针图片）

# css
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

攀登不止，华为数据库论文入选SIGMOD 2024，技术创新再谱新篇

avatar 华为云开发者联盟
cover

揭秘10亿+高并发应用如何实现高效稳定的开发和运维

avatar 华为云开发者联盟
cover

如何玩转云端文生视频？华为云AI优秀开发者来揭秘！

avatar 华为云开发者联盟