html设置鼠标指针的形状 CSS - 鼠标指针样式详解（cursor光标样式 自定义指针图片）...

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

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

1，修改光标样式

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

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

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

.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;}

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

.url {cursor: url(refresh.png),auto;}