网页设计教程：Div穿透

让毁灭飞

网页设计教程：Div穿透

在做网页设计的时候有时候会碰到两个图片放到一个div里面，并且还要全部显示，还要咋滴，反正就是好多要求，下面由51RGB小编群390****0913整理的，关于这个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事件，而是让事件穿过该元素到达下面的元素。

更多seo内容点击地址 http://www.51rgb.com/或加讨论群390****0913