pointer-events: none;
通常情况下，在一个盒子内部的元素会阻挡该盒子后面的元素，但有时候大家需要在该盒子的背景或伪元素中添加事件，而传统的解决方案通常是将内容元素从容器中分离，再通过布局和对齐等方式来实现重叠的效果，而这种方式通常过于繁琐和复杂。但是，通过CSS3的pointer-events属性，大家可以很方便地解决这一问题。
pointer-events属性是CSS3的一个新特性，它可以用来控制在元素上发生的各种事件是否响应，取值包括auto，none，inherit三种。
当指定为none时，表示当用户点击鼠标或触摸屏幕时，该元素不会响应任何事件，甚至包括CSS3中的点击事件，而是会向下穿透到该元素后面的元素中，让后面的元素响应用户的操作。
#box {
width: 200px;
height: 200px;
background-color: #fff;
opacity: 0.5;
position:relative;
}
#box:hover::after {
content: "";
width: 100px;
height: 100px;
background-color: #f90;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}在上述示例中，大家定义了一个id为box的容器，然后在容器上面设置一个伪元素，用来显示圆形。由于pointer-events属性被设置为none，所以当用户点击或悬停在该圆形区域中时，不会触发任何事件，相反，事件会传递到下一层的元素中，继续触发。
总之，通过使用pointer-events属性，大家可以解决传统方式中复杂的事件穿透问题，使得页面的开发更加简单和高效。