div不响应鼠标事件

最新推荐文章于 2025-04-18 11:31:28 发布

丰色木夕

最新推荐文章于 2025-04-18 11:31:28 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： pointer-events css

本文链接：https://blog.csdn.net/youlinhuanyan/article/details/108294398

css 专栏收录该内容

5 篇文章

订阅专栏

当需要一个透明div且不响应鼠标事件时，可以通过在CSS中添加`pointer-events: none;`来实现。此设置会阻止div捕获任何鼠标事件。然而，可以通过在子元素中使用`pointer-events: auto;`来恢复特定区域的事件响应。例如，点击设置了`pointer-events: none;`的div不会触发事件，而点击设置了`pointer-events: auto;`的子div则可以。

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

div不响应鼠标事件

有时，需要覆盖在表面的div完全透明，并且，鼠标事件也不相应。如何实现呢，其实很简单
只需要加使用css一句话即可实现：
只需要添加style样式 pointer-events: none 即可不相应任何鼠标事件
使用pointer-events:none 后，子元素的div内容将会继承该特性，此时，可以在子元素中使用pointer-events:all 恢复事件响应

<script>
	function hello(e) {
		console.log(e)
	}
</script>
<div id="parent-div" style="width: 800px; height:600px">
	<div id="main-div" style="width:100%; height: 100%; pointer-events: none" onClick="hello('aaa')">
		<div id="sub1-div" onClick="hello('hello-1')">Hello 1</div>
		<div id="sub2-div" style="pointer-events: all;" onClick="hello('hello-2')">Hello 2</div>
	</div>
</div>