鼠标 not-allowed 样式，和 css3 point-events

最新推荐文章于 2025-06-11 10:49:55 发布

原创最新推荐文章于 2025-06-11 10:49:55 发布 · 2.5k 阅读

CC 4.0 BY-SA版权

文章标签：

2 篇文章

订阅专栏

本文介绍了如何使用CSS属性cursor和pointer-events来控制网页元素上的鼠标样式和事件响应行为。通过设置cursor:not-allowed;可以使鼠标显示为禁用状态，而pointer-events属性的不同值可以实现元素及其后代元素对于鼠标事件的不同响应方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cursor: not-allowed;
1. 设置改样式后，鼠标样式为禁用图标
pointer-events: ;
1. 值为auto的时候：效果和没有定义pointer-events属性相同；鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
2. 值为none的时候：元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。其他值只能应用在SVG上。
两者同时使用，鼠标样式则为 default；
例：div {

cursor: not-allowed;

pointer-events: none;

}