pointer-events: none；造成鼠标悬浮没有title

最新推荐文章于 2024-11-05 01:16:51 发布

ou得之

最新推荐文章于 2024-11-05 01:16:51 发布

阅读量818

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_42190134/article/details/126105474

版权

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了CSS的pointer-events属性，该属性用于控制元素是否能够响应鼠标指针事件。通过设置为none或auto，可以使得元素在悬浮时禁用或启用点击交互。在排查问题时，作者发现pointer-events:none导致了元素悬浮失效，修改为auto后恢复正常。此属性对于网页交互设计和调试具有重要意义。

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

pointer-events 属性是一个指针属性，是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<style type="text/css">
        .suspend-none {
            pointer-events: none;
        }
		.suspend-auto {
            pointer-events: auto;
        }
</style>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
	<div style="width:300px;">
		<div class="suspend-none" title="afsfdsfdsfsdf">
			你好，悬浮失效
		</div>
		<br/>
		<div class="suspend-auto" title="悬浮生效">
			你好，悬浮生效
		</div>
	</div>
</body>

</html>

在排查这个问题的时候，最开始以为有元素层级（z-index）在有title元素的上方（即对该元素进行了遮挡），所以悬浮失效。通过cursor:pointer判断元素的层级，一个一个元素的去排查，发现鼠标悬浮到某个元素时，pointer指头消失，最后在这个元素上发现了pointer-events: none，通过查资料，发现就是这个css属性在捣乱。