pointer-events:是css3的一个属性,指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件,换句话说:可以阻止鼠标事件的发生,包过鼠标经过、点击、移入移出等事件。

可用值:

  1.   auto:自动,和不写一样!
  2.   none:阻止用户的点击动作产生任何效果;阻止缺省鼠标指针的显示;阻止CSS里的 hover 和 active 状态的变化触发事件;阻止JavaScript点击动作触发的事件
  3.   pointer-events: visiblePainted; /* SVG only */
  4.   pointer-events: visibleFill;    /* SVG only */
  5.   pointer-events: visibleStroke;  /* SVG only */
  6.   pointer-events: visible;        /* SVG only */
  7.   pointer-events: painted;        /* SVG only */
  8.   pointer-events: fill;           /* SVG only */
  9.   pointer-events: stroke;         /* SVG only */
  10.   pointer-events: all;  /* SVG only */

案例实战:

<style type="text/css"> 
 .pea{pointer-events: auto;}
 .pen{pointer-events: none;}
</style> 
<a href="http://www.51qux.com" class="ea">七娃</a> 
<a href="http://www.51qux.com" class="pen">七娃</a>

效果:

CSS3:pointer-events指针事件-QUI-Notes

浏览器兼容

CSS3:pointer-events指针事件-QUI-Notes