CSS pointer-events 让鼠标穿透元素

最近，认识到一个新的CSS属性：pointer-events。称为鼠标事件，超级实用的属性！让我们来看看两个例子：

 

　　首先，上图是某东商城的商品列表页中的商品，在右上角有一个“惊爆价”的图标，大家都知道这是用一个标签在绝对定位上去的，会遮住下面的商品图片，鼠标移到“惊爆价”图片是点击不了后面图片的链接的，当然我们也可以给这个图标也加上链接，这样就能解决问题。（今天可不是说这么简单的事情哦，我们继续）

　　接着，这是微博首页中会不断更新并滚动的微博记录，在最下面，加了一个白色透明渐变的过度条，这次在过度条上可加不了链接，那么当内容滚动这里的时候就无法点击。

 

　　这时，该说说 pointer-events 的作用了：

pointer-events:auto | none;

默认 auto。

常用的值是这两个，还有其他的值，不过仅限于SVG。

　　设置 pointer-events:none 时，浏览器将会忽略掉鼠标在该元素上的所有鼠标事件（包括 CSS 和 JavaScript 的鼠标事件），如果在该元素的下面还有元素存在，那么会触发下面元素的鼠标事件。

　　这样，前面举的两个例子，都可以使用这一属性解决之。当然还要关注他的兼容性。

　　Firefox、Chrome、Safari 都支持这个属性，IE6-9 都不支持，Opera 在 SVG 中支持该属性但是 HTML 中不支持。

　　基于渐进增强来说，在合适的地方加上这个属性，那是再好不过了。