div穿透

当你有2个div叠在一起时，一般是下面的div显示主要内容如图片，上面div显示说明。

但是你往往有一个连接在下面的div上，然而由于特殊原因你上面的div会完全盖住底下的。此时点击不能。

此时有一个css属性可以调节：pointer-events。前提是上面的div有很多的空白，没有背景颜色没有背景图片等。

上面的div可以用pointer-events: none;

此时上面的div被穿透了。

如果你上面的div有比较小的ul标签或li标签用来显示文字，可以用pointer-events: auto;，此时li标签仍然是点击有效的。

 

扩展阅读：

Pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。

如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素。

 

摘选自懒人建站