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

需求：将一张照片盖到一个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 值会将它设置为最原始的值，即标签的默认值。

div增加鼠标点透，css设置点击穿透相关推荐

什么是 HTML div标签以及如何使用 CSS 设置样式
HTML 分割标记,简称为"div",是一种特殊元素,可让您在网页上将相似的内容集组合在一起.您可以将其用作关联相似内容的通用容器. 标签是最常用的div标签之一,尽管引入了语义元 ...
div超出不换行_div+CSS设置一行内文字超过宽度不换行且不显示
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果我们不想让他换行显示那要怎么办呢?看到这个标题很容易就会想到截断文字加"..."的做法. 一般的文 ...
Css 样式点击穿透
什么是pointer-events? pointer-events 属性是一个指针属性,是用于控制在什么条件下特定的图形元素可以成为指针事件的目标. This CSS property,when se ...
html设置div页面最底,使用css让大图片不超过网页宽度
让大图片不超过网页宽度,让图片不撑破通过CSS样式设置的DIV宽度! 接下来,我们来介绍下网站在开发DIV+CSS的时候会遇到一个问题,在发布一个大图片的时候因为图片过宽会撑破自己设置的div宽度的问 ...
css 设置div的宽度根据内容自适应
css设置: width:fit-content; 实现div居中,宽度自适应: margin: 0 auto; width:fit-content;
css设置div不可编辑,css 怎么设置div不可点击
css设置div不可点击的方法:1.通过"event.preventDefault()"方法取消事件的默认动作:2.通过"event.stopPropagation()& ...
html内容超出不自动滚动,css设置div滚动条内容不超过就不显示
css设置div滚动条内容不超过就不显示实现内容不超出就不显示滚动条的效果,可以设置div的css样式为overflow:auto,当overflow取值为auto时,如果内容被修剪,则浏览器会显示 ...
html代码字号div style=,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
在HTML中让边框变透明,如何用CSS设置DIV边框透明
如何实现用CSS设置DIV边框为透明呢?我们来看一看. 工具/材料电脑操作方法 01 透明一般认为是一种颜色属性,但是并没有这个数值.我们找到了一种让div实现透明的最佳方案,运用RGBA 02 ...

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

div增加鼠标点透，css设置点击穿透相关推荐

最新文章

热门文章