光标样式
css
p {
cursor: pointer;
}
通过设置 cursor
属性,可以改变鼠标指针的样式。
以下是 cursor
属性的取值 (参考):
类型 | CSS 值 | 例子 | 描述 |
---|---|---|---|
General | auto | 浏览器根据当前内容决定指针样式 | |
default | 默认指针,通常是箭头。 | ||
none | 无指针被渲染 | ||
链接及状态 | context-menu | 指针下有可用内容目录。 | |
help | 指示帮助 | ||
pointer | 悬浮于连接上时,通常为手 | ||
progress | 程序后台繁忙,用户仍可交互 (与wait 相反 ). | ||
wait | 程序繁忙,用户不可交互 (与progress 相反 ).图标一般为沙漏或者表。 | ||
选择 | cell | 指示单元格可被选中 | |
crosshair | 交叉指针,通常指示位图中的框选 | ||
text | 指示文字可被选中 | ||
vertical-text | 指示垂直文字可被选中 | ||
拖拽 | alias | 复制或快捷方式将要被创建 | |
copy | 指示可复制 | ||
move | 被悬浮的物体可被移动 | ||
no-drop | 当前位置不能扔下 Firefox bug 275173Windows 或 Mac OS X 中 "no-drop 与 not-allowed 相同". | ||
not-allowed | 不能执行 | ||
grab | 可抓取 译者注:grab 和 grabbing 在比较后期才被支持,见浏览器兼容表 | ||
grabbing | 抓取中 | ||
重设大小及滚动 | all-scroll | 元素可任意方向滚动(平移). Firefox bug 275174Windows 中,"all-scroll 与 move 相同". | |
col-resize | 元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头 | ||
row-resize | 元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头 | ||
n-resize | 某条边将被移动。例如元素盒的东南角被移动时使用 se-resize | ||
e-resize | |||
s-resize | |||
w-resize | |||
ne-resize | |||
nw-resize | |||
se-resize | |||
sw-resize | |||
ew-resize | 指示双向重新设置大小 | ||
ns-resize | |||
nesw-resize | |||
nwse-resize | |||
缩放 | zoom-in | 指示可被放大或缩小 | |
zoom-out |
TIP
具体指针样式不同浏览器不同系统样式可能不同。