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

官方文档：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;*/
}