当前位置: > > > CSS - 鼠标指针样式详解(cursor光标样式、自定义指针图片)

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
  • 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>
评论0