pointer-events——用CSS属性禁掉元素上的点击事件，实现点击穿透

最新推荐文章于 2024-09-27 08:22:22 发布

xyzgzszdmsdi

最新推荐文章于 2024-09-27 08:22:22 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签：前端 css html 透明

本文链接：https://blog.csdn.net/httguangtt/article/details/86512076

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

官方文档：pointer-events | MDN

禁掉元素上的点击事件。

效果

可以看到后面的div元素挡住了按钮，一般来说，被挡住那一半按钮我们就点不到了。
但是如果加上了pointer-events: none，我们还是可以穿过这个div元素点到后面的按钮。

实战时一般用在这个div元素是半透明的场景上。

效果图

HTML

<div class='container'>
  <button>can't click me</button>
  <div class='hide'></div>
</div>

CSS

.container {
  width: 300px;
  height: 300px;
  background-color: pink;
  text-align: center;
  padding-top: 50px;
  position: relative;
}
button {
  width: 100px;
  height: 30px;
  background-color: yellow;
  border: 1px solid;
  border-radius: 5px;
  cursor: pointer;
}
.hide {
  position: absolute;
  width: 80px;
  height: 200px;
  background-color: green;
  left: 80px;
  top: 0;
  /*pointer-events: none;*/
}