神奇的css属性pointer-events

       pointer-events属性是一个神奇的属性，或许你对它比较陌生，不知道它有什么用处。没关系！下面课课家就来为大家展开讲解一下css的pointer-events属性的神奇之处！

　　首先，我们看看两个小例子。

　　例子一：

　　上图是某购物商城的商品列表页中的商品，在右上角有一个“惊爆价”的图标，大家都知道这是用一个标签在绝对定位上去的，会遮住下面的商品图片，这时如果使用鼠标点击“惊爆价”图片，是不会触发任何事件的，即不会打开商品链接。

　　例子二：

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

　　看了以上两个例子，你是否有解决方法。对于例子一，你可能会给“惊爆价”图片也加上链接来解决。但例子二呢？想不到了是吧？

　　现在，我们的pointer-events属性就可以隆重登场了。

　　pointer-events属性常用的值有两个分别是auto和none。当然它还有其他的值，不过仅限于SVG。

　　none——浏览器将会忽略掉鼠标在该元素上的所有鼠标事件（包括CSS和java Script的鼠标事件），如果在该元素的下面还有元素存在，那么会触发下面元素的鼠标事件，即我们常说的鼠标穿透效果。

　　auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。

　　换而言之，我们通过设置 pointer-events:none就可以把前面所举的两个例子轻松解决了，神奇吧！

　　实现代码如下：

　　<style>  

　　.overlay {  

　　pointer-events: none;  

　　 }  

　　</style>  

　　<div id="overlay" class="overlay"></div>  

　　最后，我们来了解一下pointer-events的注意事项：

　　1.子元素可以声明pointer-events来解禁父元素的阻止鼠标事件限制。

　　2.如果你对一个元素设置了click事件监听器，然后你移除了pointer-events样式声明，或把它的值改变为auto，监听器会重新生效。基本上，监听器会遵守pointer-events的设定。

　　以上就是课课家网站给大家介绍的神奇的css属性pointer-events所有内容。通过本文的学习，如果在实际工作中遇到类似的问题，你会解决了吗？