CSS pointer-events属性

CSS的pointer-events属性用于控制元素是否可以被鼠标事件触发。

语法

pointer-events: none | auto | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit;

• none：元素不会响应任何鼠标事件，包括点击、滚动、悬停等；
• auto：元素按照通常行为响应鼠标事件；
• visiblePainted：元素在渲染表面时可点击，不包括透明部分；
• visibleFill：元素的填充区域可点击，不包括边框部分；
• visibleStroke：元素的边框可点击，不包括填充区域；
• visible：元素的任何可见部分都可点击；
• painted：元素的填充区域可点击，包括透明部分，但不包括边框部分；
• fill：元素的填充区域可点击，但不包括边框部分和透明部分；
• stroke：元素的边框可点击，但不包括填充区域和透明部分；
• all：元素的任何部分都可点击；
• inherit：继承父级元素的pointer-events属性值。

使用例子

下面是一个使用pointer-events属性的例子，当鼠标悬停在绿色方块上时，红色方块不会响应鼠标事件：

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  width: 200px;
  height: 200px;
  background-color: red;
}

.child {
  width: 100px;
  height: 100px;
  background-color: green;
  pointer-events: none;
}

注意事项

• pointer-events属性不会影响元素的tab键聚焦状态；
• IE浏览器只支持auto、none、visiblePainted、visibleFill、visibleStroke、inherit这几个值；
• 某些浏览器（如火狐Firefox）默认不允许某些元素（如inline元素或一些非交互元素）响应pointer-events事件，需要手动设置-moz-user-select属性为none。