关于html添加了pointer-event属性再添加cursor未生效的问题

作者：System 时间：2024年08月08日分类：所有,css3 字数：540

pointer-events属性控制元素如何响应鼠标事件，比如点击事件。当设置为none时，元素上的鼠标事件会被忽略，cursor设置也不会生效。

如果你在HTML元素上添加了pointer-events: none;，那么该元素上的鼠标事件将不会被处理，也就是说，你不能在这个元素上改变鼠标光标样式。

解决方法：

如果你需要在这个元素上改变鼠标光标样式，你可以移除pointer-events: none;属性，或者将其设置为auto。
如果你不希望元素响应鼠标事件，但仍然需要改变光标样式，你可以通过给父元素设置pointer-events: none;，然后为子元素设置cursor样式。

示例代码：




<!-- 父元素忽略鼠标事件，子元素可以设置光标样式 -->
<div style="pointer-events: none;">
  <div style="cursor: pointer;">点击我</div>
</div>

在这个例子中，父元素不会响应鼠标事件，但子元素（显示为“点击我”的div）可以设置光标样式为手形，用户点击时会看到手形光标。