CSS cursor 属性
示例
CSS 可以生成一堆不同的鼠标光标
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.col-resize {cursor: col-resize;}
.context-menu {cursor: context-menu;}
.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;}
自己动手试一试 »
定义和用法
cursor
属性指定了当鼠标指针悬停在一个元素上时要显示的鼠标光标。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
属性 | |||||
---|---|---|---|---|---|
cursor | 5.0 | 5.5 | 4.0 | 5.0 | 9.6 |
CSS 语法
cursor: 值;
属性值
值 | 描述 | 演示 |
---|---|---|
alias | 光标指示将要创建某物的别名 | 试一试 » |
all-scroll | 光标指示可以在任何方向上滚动 | 试一试 » |
auto | 默认。浏览器设置一个光标 | 试一试 » |
cell | 光标指示可以选择一个单元格(或一组单元格) | 试一试 » |
col-resize | 光标指示列可以水平调整大小 | 试一试 » |
context-menu | 光标指示有可用的上下文菜单 | 试一试 » |
copy | 光标指示某物将被复制 | 试一试 » |
crosshair | 光标呈现为十字线 | 试一试 » |
default | 默认光标 | 试一试 » |
e-resize | 光标指示框的边缘将向右(东)移动 | 试一试 » |
ew-resize | 指示一个双向调整大小的光标 | 试一试 » |
抓取 | 光标指示可以抓取某物 | 试一试 » |
正在抓取 | 光标指示可以抓取某物 | 试一试 » |
帮助 | 光标指示有帮助可用 | 试一试 » |
move | 光标指示某物将被移动 | 试一试 » |
n-resize | 光标指示框的边缘将向上(北)移动 | 试一试 » |
ne-resize | 光标指示框的边缘将向上和向右(北/东)移动 | 试一试 » |
nesw-resize | 指示一个双向调整大小的光标 | 试一试 » |
ns-resize | 指示一个双向调整大小的光标 | 试一试 » |
nw-resize | 光标指示框的边缘将向上和向左(北/西)移动 | 试一试 » |
nwse-resize | 指示一个双向调整大小的光标 | 试一试 » |
no-drop | 光标指示拖动的项目不能在此处放置 | 试一试 » |
none | 不为元素呈现光标 | 试一试 » |
not-allowed | 光标指示请求的操作将不会被执行 | 试一试 » |
pointer | 光标是一个指针,表示一个链接 | 试一试 » |
progress | 光标指示程序正忙(进行中) | 试一试 » |
row-resize | 光标指示行可以垂直调整大小 | 试一试 » |
s-resize | 光标指示框的边缘将向下(南)移动 | 试一试 » |
se-resize | 光标指示框的边缘将向下和向右(南/东)移动 | 试一试 » |
sw-resize | 光标指示框的边缘将向下和向左(南/西)移动 | 试一试 » |
text | 光标指示可以选择的文本 | 试一试 » |
URL | 一个逗号分隔的自定义光标 URL 列表。注意:请务必在列表末尾指定一个通用光标,以防所有 URL 定义的光标都无法使用 | 试一试 » |
vertical-text | 光标指示可以选择的垂直文本 | 试一试 » |
w-resize | 光标指示框的边缘将向左(西)移动 | 试一试 » |
wait | 光标指示程序正忙 | 试一试 » |
zoom-in | 光标指示可以放大某物 | 试一试 » |
zoom-out | 光标指示可以缩小某物 | 试一试 » |
initial | 将此属性设置为其默认值。阅读关于initial | |
inherit | 从其父元素继承此属性。阅读关于inherit |
相关页面
HTML DOM 参考:cursor 属性