光标样式

cursor 可以设置当鼠标光标悬停在元素上时的样式，接收以下的值：

• 光标关键字
• 图片地址：指向自定义光标图片的地址，并且地址后面可选择地跟一对空格分隔的数字 x、y 表示偏移。必须跟一个关键字鼠标样式作为备选方案。

/* 关键字值 */
cursor: pointer;
cursor: auto;

/* 使用URL，并提供一个关键字值作为备用 */
cursor: url(https://3yya.com/logo-mini.png), pointer;

/* URL和xy的坐标偏移值，最后提供一个关键字值作为备用 */
cursor:  url(cursor1.png) 4 12, auto;
cursor:  url(cursor2.png) 2 2, pointer;

下列中按钮的光标设置成了 not-allowed。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/vYWQGbO?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

光标样式关键字

$$tip

可以将鼠标光标移动到属性值上查看效果。

$$

属性值	描述
<p style="cursor: auto">auto</p>	根据当前内容自动决定样式。
<p style="cursor: default">default</p>	默认光标，通常是箭头。
<p style="cursor: none">none</p>	没有光标。
<p style="cursor: context-menu">context-menu</p>	指针下有可用内容目录。
<p style="cursor: help">help</p>	帮助光标。
<p style="cursor: pointer">pointer</p>	小手光标，通常用于链接或按钮等可以点击的元素。
<p style="cursor: progress">progress</p>	处理中的光标。
<p style="cursor: wait">wait</p>	等待中的光标。
<p style="cursor: cell">cell</p>	选中单元格的光标。
<p style="cursor: crosshair">crosshair</p>	十字指标。
<p style="cursor: text">text</p>	文本选择光标。
<p style="cursor: vertical-text">vertical-text</p>	垂直文本选择光标。
<p style="cursor:alias">alias</p>	快捷方式光标。
<p style="cursor: copy">copy</p>	复制光标。
<p style="cursor: zoom-in">zoom-in</p>	放大光标。
<p style="cursor: zoom-out">zoom-out</p>	缩小光标。
<p style="cursor: move">move</p>	移动光标。Windows 和 MacOS 下 “move” 和 “all-scroll” 相同。
<p style="cursor: no-drop">no-drop</p>	禁止放置光标。 Windows 和 MacOS 下 “no-drop” 和 “no-allowed” 相同。
<p style="cursor: not-allowed">not-allowed</p>	不能执行光标。
<p style="cursor: grab">grab</p>	抓取光标。
<p style="cursor: grabbing">grabbing</p>	抓取中光标。
<p style="cursor: all-scroll">all-scroll</p>	允许滚动光标。
<p style="cursor: col-resize">col-resize</p>	设置宽度光标。
<p style="cursor: row-resize">row-resize</p>	设置高度光标。
<p style="cursor: n-resize">n-resize</p>	n-resize
<p style="cursor: e-resize">e-resize</p>	e-resize
<p style="cursor: s-resize">s-resize</p>	s-resize
<p style="cursor: w-resize">w-resize</p>	w-resize
<p style="cursor: ne-resize">ne-resize</p>	ne-resize
<p style="cursor: nw-resize">nw-resize</p>	nw-resize
<p style="cursor: se-resize">se-resize</p>	se-resize
<p style="cursor: sw-resize">sw-resize</p>	sw-resize
<p style="cursor: ew-resize">ew-resize</p>	ew-resize
<p style="cursor: ns-resize">ns-resize</p>	ns-resize
<p style="cursor: nesw-resize">nesw-resize</p>	nesw-resize
<p style="cursor: nwse-resize">nwse-resize</p>	nwse-resize

---

练习

1. 用图片自定义你的光标样式。