css层遮挡无法点击解决csspointer-events绝对定位层遮挡的问题解决办法
本文章来给各位同学介绍关于在css pointer-events绝对定位层遮挡的问题解决办法，各位同学不防进入参考。
css鼠标点击样式在没有背景和图片填充的情况下，火狐和Chrome下不能直接点击绝对定位层下面的元素（比如链接），下面的链接被上面的绝对定位层挡住了。在IE里面是可以直接点击绝对定位层下面的链接。
对于这种问题需要用到一个css3的属性，可以通过给绝对定位的层多加一个样式 pointer-events:none; 以后， 绝对定位层下的元素就可以点击了。
光给绝对定位的层添加pointer-events:none; 的样式是不够的，你可以发现所有在此层里的元素，都不能点击了，就连链接和按钮也同样不起作用，所以我们需要给绝对定位层中的其他非空的元素把样式再返回。
给里面的元素重新设置为 pointer-events:auto，只给需要操作的元素区域设置即可。
查看演示页面
pointer-events属性有很多值：
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
但是对于浏览器来说，只有auto和non两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。
下面介绍一下pointer-events这两个属性值详细描述
auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。