温馨提示：在 ChatGPT 官网（www.chatgpt.com）使用 GPT-5.5、ChatGPT-Image-2 等模型时，需要 ChatGPT Plus 或更高等级的会员权限。如需购买账号或充值会员，请扫码添加我们客服咨询。
CSS 的cursor属性可轻松改变鼠标指针样式，让交互更生动，语法为cursor: value;挂载在目标元素上：，- **系统预设**：pointer（手型，用于链接）、default（默认箭头）、text（文本选择 I 型）、wait（加载等待）、help（帮助问号）。，- **动作标识**：move（移动十字）、cell（单元格十字）、crosshair（精准十字）、grab与grabbing（抓取状态）。，- **禁用与缩放**：not-allowed（禁止圆圈）、no-drop（不可投放）、e-resize等八个方向缩放指针。，还可自定义：cursor: url('箭头.png'), auto;，浏览器会优先加载自定义图标，失败则回退。
大家好,今天我们来讲一个很简单、很实用的CSS知识点：cursor属性，你不用害怕，这个名字听起来有点奇怪，但它的意思很简单，鼠标指针的样子”。
你平时用电脑,鼠标箭头是不是有时候会变成小手？有时候变成一条竖线？有时候又变成转圈圈的那个圈？这些变化，都是靠这个cursor属性来实现的，我们写网页的时候，就可以用这个属性，告诉浏览器，当用户把鼠标放在某个地方时，鼠标应该变成什么样子，这能让用户一看就知道，这个地方能不能点、能不能做别的操作。
为什么我们要学这个？因为一个好的网页，应该让用户用起来很舒服，一个按钮，你希望用户知道它能点，那鼠标放上去变成小手，用户就明白了，一个文本框，你希望用户在里面打字，鼠标放上去变成一条竖线，用户自然就会去点，这就是cursor属性的用处，它能帮你和用户“说话”。
我们就从最简单、最常用的几种用法开始学，你跟着我一步步来，很快就懂了。
你想用这个属性,得写在哪？很简单，就写在你想要改变鼠标样式的那个元素的CSS里，你有一个按钮，它的CSS是这样写的：
.my-button {
background-color: blue;
color: white;
padding: 10px 20px;
}
你想让鼠标移到这个按钮上时,变成小手，你只需要在它里面加上一行代码：
.my-button {
background-color: blue;
color: white;
padding: 10px 20px;
cursor: pointer; /* 这就是我们要加的东西 */
}
看到了吗？就这一行cursor: pointer;，就搞定了。pointer指针”的意思，在这里就是指那个“小手”，只要你想让用户点击某个东西，你就用pointer，这是最常用、最需要记住的一个值。
我们看看其他几种常见的情况。
-
cursor: default;（默认箭头） 这是最普通的样子，就是那个白色的小箭头，大部分时候，网页上都会用这个，如果你不确定用什么，就用这个。 -
cursor: text;（文字选择光标） 这个就是那条“I”形状的竖线，当你想让用户在一个输入框或者一段文字里选择、复制、粘贴文字时，就用这个，比如<input>输入框，浏览器默认就是cursor: text;。 -
cursor: wait;（等待光标） 这就是那个转圈圈的小圆圈，或者是一个沙漏，当你网页正在加载某个东西，需要用户等一下的时候，就用这个，你点了“提交”按钮，程序还没反应，你就可以把那个按钮的鼠标指针变成cursor: wait;，等程序处理完了，再变回cursor: pointer;。.submit-button { cursor: pointer; /* 平时是手 */ } .submit-button.loading { cursor: wait; /* 在处理中变成转圈 */ } -
cursor: not-allowed;（禁止操作光标） 这个是一个圆圈里带斜杠的样子，表示“这个地方你不能点”，一个按钮现在是灰色的，表示“功能未开放”，你就可以把鼠标变成cursor: not-allowed;，这样用户一看就明白了。 -
cursor: move;（移动光标） 这个是一个十字箭头，表示“这个元素可以被拖动”，你做了一个拖拽排序的功能，用户拖的每个小方块，鼠标变成cursor: move;，用户就知道它能被拖动了。 -
cursor: grab;和cursor: grabbing;（抓取光标） 这个比较新，但很好用。grab是一个张开的手掌，表示“可以抓取”。grabbing是一个握紧的手掌，表示“正在抓取”，它们经常用在需要拖拽或滚动的区域，比如地图、图片墙等，一开始鼠标是grab，当你按下鼠标并开始拖动时，你就把它变成grabbing。
除了上面这些,你还可以用一些更自由的方法，比如自己定义鼠标的样子，对于刚刚开始学的你，上面这7个常用的值（pointer， default， text， wait， not-allowed， move， grab/grabbing）已经足够你处理大部分情况了。
我们再总结一下,这些值分别在什么时候用：
- 看得到“按钮”：用
pointer，让用户知道能点。 - 看到输入框：用
text，让用户知道能打字。 - 看到不能点的灰色按钮：用
not-allowed，告诉用户“不行”。 - 看到能拖动的东西：用
move、grab或grabbing，告诉用户“能拉”。 - 等程序处理：用
wait，告诉用户“等一下”。 - 什么都不确定：用
default，最安全。
怎么把这些东西写进你的代码里？除了我们刚才说的写在CSS样式文件里，还有一种更快的方法，就是直接写在HTML标签的“style”属性里。
<button style="cursor: pointer;">点我</button>
这样可以,但不推荐，因为如果以后你要改，就得一个一个去找，很麻烦，更好的做法是写在一个专门的CSS文件里，或者写在HTML的<style>标签里。
给你一个很实用的小技巧,当你写代码的时候，可以打开浏览器的“开发者工具”（一般按F12就能打开），然后你选中一个元素，在右边的“样式”窗口里，找到“cursor”这个属性，你就可以看到一个下拉菜单，你点开它，它能预览所有不同的鼠标样子，还可以直接选，这是非常好用的一个功能，你可以自己试一下。
好了,关于cursor属性的基础用法，就讲到这里，它很简单，但对用户体验的帮助却很大，你只要记住那几种常用的值，然后在你写每个按钮、每个输入框的时候，想一想“用户看到这个鼠标，他知道该怎么做吗？”，你就已经走在正确的路上了。
希望这篇文章对你有用,去试试吧，让你的鼠标指针变得更聪明一点。
温馨提示：在 ChatGPT 官网（www.chatgpt.com）使用 GPT-5.5、ChatGPT-Image-2 等模型时，需要 ChatGPT Plus 或更高等级的会员权限。如需购买账号或充值会员，请扫码添加我们客服咨询。
网友评论