CSS 指定滑鼠游标的型态

cursor 属性可以设定多种不同的值,每个值代表 cursor 游标的型态,可以根据不同的元素和情境来选择合适的 cursor 游标型态,指定游标的型态可以增加网页的互动性、提示其当前元素的功能。变更滑鼠游标的型态设定 CSS 指定滑鼠游标,当滑鼠移动到指定的部份时,使用各种不同的方式来自订滑鼠游标型态 cursor 属性改变滑鼠游标的形状,表示当前的操作方式。


滑鼠游标显示效果

指定滑鼠游标的型态,直接将滑鼠游标移到下列范例可看到效果。

cursor: crosshair; /* 十字线型 */
cursor: cell; /* 十字小方格 */
cursor: move; /* 十字箭头(移动) */
cursor: all-scroll; /* 四方捲动 */
cursor: n-resize; /* 箭头朝上 */
cursor: s-resize; /* 箭头朝下 */
cursor: e-resize; /* 箭头朝右 */
cursor: w-resize; /* 箭头朝左 */
cursor: nw-resize; /* 箭头左上 */
cursor: sw-resize; /* 箭头左下 */
cursor: se-resize; /* 箭头朝右上 */
cursor: ne-resize; /* 箭头朝右下 */
cursor: col-resize; /* 改变直行数 */
cursor: row-resize; /* 改变横栏数 */
cursor: zoom-in; /* 放大 */
cursor: zoom-out; /* 缩小 */
cursor: text; /* I 输入文字符号 */
cursor: vertical-text; /* 垂直文字 */
cursor: help; /* 协助加一问号 */
cursor: wait; /* 等待中、沙漏、漏斗 */
cursor: progress; /* 进行中;作业中 */
cursor: pointer; /* 表示超连结、手型鼠标 */
cursor: not-allowed; /* 无法使用 */
cursor: grab; /* 抓住 */
cursor: grabbing; /* 抓取 */