我们浏览网页时会发现,鼠标指针会根据不同类型的元素进行相应的变化,比如:移到文本框上时会变成文本指示样式,移到链接上时会变成手型(手指形状)。
如果想要修改指针样式,只需要通过 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;}