简短一篇记录一下css3中pointer-events属性禁用a标签以及鼠标穿透

pointer-events是css3的一个属性，属性值特别多，这里只记录下none、auto两个属性的使用，其它属性和svg相关。

案例1：禁用a标签点击

给a标签设置pointer-events:none样式

<a href="XXX" style="pointer-events:none; opacity: 0.5">你点击我没反应，哈哈</a>

但，此时键盘的tab切换到a标签时，点击enter，会有效果，此时可将href属性移除，达到鼠标和键盘都无反应的效果

<a style="pointer-events:none; opacity: 0.5">你用键盘也找不到我，哈哈</a>

案例2：穿透到遮层下方点击元素

假设此时有一个a标签被一个设置有absolute定位的div盖住，默认情况下是无法点击下面的a标签的，此时可设置遮层div样式

pointer-events:none，可使鼠标穿透到下方去点击a标签

遮层：<div style="pointer-events:none;> xxx </div>

 

总结：这里仅仅是记录下工作中遇到的东西，哈哈