CSS pointer-events 让鼠标穿透元素

返回列表

代码日记 | 小叉 | 2012年09月12日

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

 

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


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


  这时,该说说 pointer-events 的作用了:

pointer-events:auto | none;

默认 auto。

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

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

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

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

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

标签
CSS3
参考资料
1http://www.qianduan.net/css3-pointer-event-description.html

这里是小叉试验场的简版,请到正式版参与评论

下一篇:教你怎么把图标字体(IconFont)转为 PNG

上一篇:2012 国漫手记

返回列表