当前位置:天才代写 > tutorial > 网页教程 > 神奇的css属性pointer-events

神奇的css属性pointer-events

2018-05-17 08:00 星期四 所属: 网页教程 浏览:393

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

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

  例子一:

神奇的css属性pointer-events_css属性_css教程_鼠标穿透效果

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

  例子二:

滚动的微博记录

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

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

  现在,我们的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所有内容。通过本文的学习,如果在实际工作中遇到类似的问题,你会解决了吗?

 

    关键字:

天才代写-代写联系方式