跳转到内容

光标样式

css
p {
	cursor: pointer;
}

通过设置 cursor 属性,可以改变鼠标指针的样式。

以下是 cursor 属性的取值 (参考):

类型CSS 值例子描述
Generalauto

浏览器根据当前内容决定指针样式
例如当内容是文字时使用 text 样式

defaultdefault.gif默认指针,通常是箭头。
none无指针被渲染
链接及状态context-menucontext-menu.png指针下有可用内容目录。
helphelp.gif指示帮助
pointerpointer.gif悬浮于连接上时,通常为手
progressprogress.gif程序后台繁忙,用户仍可交互 (与wait 相反).
waitwait.gif程序繁忙,用户不可交互 (与progress 相反).图标一般为沙漏或者表。
选择cellcell.gif指示单元格可被选中
crosshaircrosshair.gif交叉指针,通常指示位图中的框选
texttext.gif指示文字可被选中
vertical-textvertical-text.gif指示垂直文字可被选中
拖拽aliasalias.gif复制或快捷方式将要被创建
copycopy.gif指示可复制
movemove.gif被悬浮的物体可被移动
no-dropno-drop.gif 当前位置不能扔下
Firefox bug 275173Windows 或 Mac OS X 中 "no-drop 与 not-allowed 相同".
not-allowednot-allowed.gif不能执行
grabgrab.gif

可抓取

译者注:grab 和 grabbing 在比较后期才被支持,见浏览器兼容表

grabbinggrabbing.gif抓取中
重设大小及滚动all-scrollall-scroll.gif 元素可任意方向滚动(平移).
Firefox bug 275174Windows 中,"all-scrollmove 相同".
col-resizecol-resize.gif元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
row-resizerow-resize.gif

元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头

n-resizeExample of a resize towards the top cursor 某条边将被移动。例如元素盒的东南角被移动时使用 se-resize
e-resizeExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gif指示双向重新设置大小
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
缩放zoom-inzoom-in.gif

指示可被放大或缩小

zoom-outzoom-out.gif

TIP

具体指针样式不同浏览器不同系统样式可能不同。