温馨提示：在 ChatGPT 官网（www.chatgpt.com）使用 GPT-5.5、ChatGPT-Image-2 等模型时，需要 ChatGPT Plus 或更高等级的会员权限。如需购买账号或充值会员，请扫码添加我们客服咨询。
摘要如下：，本文手把手教您使用CSS控制鼠标样式，解决鼠标变成禁止符号等常见问题，通过cursor属性可轻松设置不同光标样式，如pointer（手型）、not-allowed（禁止）、wait（等待）等，文中详细演示了如何在元素上应用这些样式，并解释了各属性的使用场景，掌握CSS鼠标样式控制能提升网页交互体验，让用户更直观地理解操作状态。
本文目录导读：
- 第一步：什么是
cursor属性？ - 第二步：怎么写这个代码？
- 第三步：什么时候会用“禁止”光标？
- 第四步：还有别的“禁止”光标吗？
- 第五步：如何配合其他属性使用？
- 第六步：怎么测试效果？
- 第七步：能不能用图片做光标？
- 第八步：常见的错误和问题
- 第九步：实际项目中的用法
- 第十步：扩展一下，还有其他光标吗？
- 总结一下
大家好,欢迎来到我们的AI教程网，今天我们来聊一个很简单，但也很实用的小知识，就是CSS里面的cursor属性，你可能会问，这是什么？简单说，它就是用来控制鼠标形状的东西。
我们平时用电脑,鼠标有时候是个箭头，有时候是个小手，有时候在输入框里会变成一条竖线，这些变化，都是cursor属性的功劳，今天我们要特别聊一聊，怎么让鼠标变成那个“禁止”的符号，就是一个圆圈加一条斜线，这个在很多地方都能看到，比如你点一个不能点击的按钮时。
那怎么用呢？别急，我们一步步来，我保证，就算你以前完全没接触过代码，看完也能学会。
第一步：什么是cursor属性？
我们先从最基础的说起,在写网页的时候，我们想控制鼠标的样子，就要用到cursor，这个单词本身意思就是“光标”，CSS里有好多现成的光标样子可以选。
default：默认的箭头。pointer：小手，代表可以点击。text：竖线，代表可以输入文字。wait：沙漏或转圈，代表正在加载。help：问号，代表有帮助信息。not-allowed：这个就是我们今天的主角，那个“禁止”的符号。
是不是很简单？你只需要在代码里写上cursor: not-allowed;，鼠标一移到那个元素上，就会变成禁止的样子。
第二步：怎么写这个代码？
好,现在我们来实际操作，假设你有一个按钮，这个按钮暂时不能点，你想让鼠标停留在上面时，变成一个禁止符号，那你的HTML代码可能是这样的：
<button class="disabled-button">暂时无法点击</button>
在CSS里,你只需要这样写：
.disabled-button {
cursor: not-allowed;
}
就这么简单。cursor: not-allowed;就是告诉浏览器：“嘿，当鼠标在这个按钮上时，给我显示那个禁止的符号。”
你可能会问,为什么按钮自己不能点？这里要区分一下。cursor只是改变鼠标的样子，它本身并不会阻止点击，如果你想完全禁止点击，你还得加上一个属性叫pointer-events: none;，这个我们后面会讲。
第三步：什么时候会用“禁止”光标？
我来说几个最常用的场景,你一看就明白。
第一个场景：表单提交，比如一个注册页面，用户必须勾选“同意条款”才能点提交按钮，如果没勾选，提交按钮就是灰色的，鼠标放上去应该变成禁止符号，这就能给用户一个很明确的提示：“你现在还不能点我。”
第二个场景：文件上传，有些网站只允许上传图片，如果你拖一个PDF文件进去，上传区域就会显示禁止符号，告诉你这个文件不行。
第三个场景：菜单或链接，有些菜单项是灰色的，代表这个功能还没开放，或者你还没达到使用的条件，鼠标放上去变成禁止，用户就明白了。
这个cursor: not-allowed;虽然不是必须的，但它能让用户界面变得更友好，更明白。
第四步：还有别的“禁止”光标吗？
有,除了not-allowed，还有一个叫no-drop，它看起来也像一个禁止符号，但多了一个小手向下方的样子，这个一般用在拖拽操作里，比如你想把一个文件拖到某个文件夹，但那个文件夹不允许放，就会显示no-drop。
但是对于大部分小白用户来说,你记住not-allowed就够了，它是最常用、最标准的“禁止”光标。
第五步：如何配合其他属性使用？
前面我说过,光改鼠标样子，按钮还是能被点击，所以我们要配合pointer-events这个属性，它专门用来控制元素能不能响应鼠标事件，比如点击、悬停等等。
如果你想彻底让一个按钮变成“不能点”，代码可以这样写：
.disabled-button {
cursor: not-allowed;
pointer-events: none;
}
pointer-events: none;的意思是：这个元素对鼠标完全不响应，鼠标点它，就像点空气一样，不会触发任何事件，加上cursor: not-allowed;，视觉和功能就都做到了。
不过要注意一点：如果用了pointer-events: none;，那鼠标的样式也可能不起作用，因为元素已经不响应鼠标了，所以cursor属性也会失效，在实际开发里，我们通常会保留cursor，但用另一种方式禁止点击，比如用JavaScript去阻止。
但是对于新手,你记住：如果只想改变鼠标样子，用cursor，如果想彻底禁止点击，用pointer-events，两个一起用，有时候会有冲突。
第六步：怎么测试效果？
写完了代码,怎么知道对不对？很简单，你用浏览器打开你的网页，然后把鼠标移到那个按钮上，如果鼠标图标变成了一个圆圈加斜线，那就成功了，如果还是箭头，那就检查一下代码有没有拼写错误。
cursor的属性值有很多，但是大小写是有要求的，比如not-allowed，中间是减号，不是下划线，也不能写成notallowed。
第七步：能不能用图片做光标？
当然可以,CSS里cursor还支持自定义图片，比如你可以用一张小箭头图片，或者你自己设计的禁止符号，语法是这样的：
.custom-cursor {
cursor: url('禁止图标.png'), not-allowed;
}
注意,这里要先写图片地址，然后逗号，再写一个备用的标准光标名字，这个备用名字，你可以写not-allowed，也可以写default，万一图片加载失败了，浏览器会显示备用的那个。
不过对于小白来说,用现成的标准光标最省事，等你以后熟悉了，可以试试自定义。
第八步：常见的错误和问题
我再说几个新手容易犯的错。
第一个：忘记加分号，CSS每一行结尾都要有个分号，比如cursor: not-allowed;，这个分号不能丢。
第二个：写错了属性名，有人会把cursor写成curser或者cursour，注意是cursor。
第三个：用了pointer-events: none;之后，鼠标样式没变化，这是因为元素不响应鼠标了，所以浏览器就不管光标了，这时候你可以把cursor属性写在它的父元素上，或者直接用JavaScript控制。
第四个：只改了光标，没改功能，比如你只把光标改成禁止，但按钮还是可以点，用户会觉得很困惑，所以一定要在功能上也禁止点击。
第九步：实际项目中的用法
我跟你讲一个实际例子,假设你在做一个购物网站，有“立即购买”按钮，但是商品下架了，这个按钮就变成灰色，鼠标放上去显示禁止符号，用户一看就知道不能买。
代码可能是这样：
<button class="sold-out">商品已下架</button>
.sold-out {
background-color: #ccc; /* 灰色背景 */
color: #666; /* 灰色文字 */
cursor: not-allowed; /* 禁止光标 */
border: 1px solid #aaa;
}
你看,很直观，用户不用去点，就知道这个按钮没用了。
第十步：扩展一下，还有其他光标吗？
当然有,CSS里有很多预定义的光标，
move：移动图标，十字箭头。crosshair：十字准心。zoom-in：放大镜。grab/grabbing：小手抓取，一般用于可拖拽的元素。
你可以自己去试试,但今天我们只学了not-allowed，你只要把这个用好，已经能解决很多问题了。
总结一下
今天我跟你聊了CSS里的cursor属性，特别是“禁止”符号怎么用，你只需要记住两句话：
- 写
cursor: not-allowed;，鼠标就会变成禁止符号。 - 如果还想彻底禁止点击,可以加
pointer-events: none;，但要小心它们之间的冲突。
这个知识非常基础,但也很实用，你以后做网页、做表单、做按钮，都会用到，希望你这个小白看完，能自己动手试一试，别怕写错，多写几次就熟了。
如果你在操作过程中遇到任何问题,比如代码写出来效果不对，或者想了解其他光标怎么用，随时可以来找我，对了，如果涉及到购买账号会员、充值代充等，或者想了解更多关于ChatGPT、Claude、Midjourney、Gemini、Cursor、Suno这些AI工具的最新资讯，都可以扫下方二维码咨询。
祝你学习愉快,下次见！
温馨提示：在 ChatGPT 官网（www.chatgpt.com）使用 GPT-5.5、ChatGPT-Image-2 等模型时，需要 ChatGPT Plus 或更高等级的会员权限。如需购买账号或充值会员，请扫码添加我们客服咨询。
网友评论