div增加鼠标点透，css设置点击穿透

news2024/11/16 8:58:44

需求：将一张照片盖到一个div上面，但同时下面div上面的点击事件不受影响。

这样就需要用到 CSS 的鼠标穿透属性：pointer-events: none，下面主要对pointer-events属性的值做一个简单的介绍。

pointer-event的所有属性值:

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

pointer-events属性定义元素是否对鼠标事件做出反应，从通用角度来说，只有以下4个值可用，剩余不多做说明，只适用于SVG（可缩放矢量）内容。

pointer-event的通用属性值:

pointer-events: auto | none | inherit | initial | unset;

pointer-events: auto; 默认值，元素对鼠标事件正常反应。
pointer-events: none; 元素不会成为鼠标事件的target，能够实现点击穿透的效果。l

例如：想给登录页面加个水印，我们一个div块，设置水印图片作为背景图片定位到原登录页面登录模块的上面，并给这个div块设置这个属性，用户点击登录时可以穿透这个div块，点击到原本的登录页面，这样就不会影响原有的登录功能及登陆样式。
pointer-events: inherit; 从其父元素继承此属性。
pointer-events: initial; initial是一个关键字，会将pointer-events属性重置为最原始的值，

先看一下官方文档解释：

initial 关键字用于将 CSS 属性设置为其默认值。initial 关键字可用于任何 CSS 属性和任何 HTML 元素。

由于pointer-events属性值过少，不方便看出来，以color属性为例，举个例子说明initial关键字的作用
```
<!DOCTYPE html>
<html>
<head>
<style>
span {
  color: green; 
}
span {
  color: red;
}
span {
  color: initial; 
}
</style>
</head>
<body>

 <span>Initial</span>
    
</body>
</html>
```
上面的这个代码结构很简单：有一个span元素，给span元素中文字“Initial‘设置颜色
```
 先将span 设置成绿色，又设置成红色，最终设置设置成initial。由于css的属性覆盖原则，下面的会覆盖上面的。所以最终生效的属性值是 color: initial;  ，那最终字体的颜色是什么颜色呢？如下图：
```
是黑色的，即 initial 值会将它设置为最原始的值，即标签的默认值。