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;
  1. pointer-events: auto; 默认值,元素对鼠标事件正常反应。

  2. pointer-events: none; 元素不会成为鼠标事件的target,能够实现点击穿透的效果。l

    例如:想给登录页面加个水印,我们一个div块,设置水印图片作为背景图片定位到原登录页面登录模块的上面,并给这个div块设置这个属性,用户点击登录时可以穿透这个div块,点击到原本的登录页面,这样就不会影响原有的登录功能及登陆样式。

  3. pointer-events: inherit; 从其父元素继承此属性。

  4. 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;  ,那最终字体的颜色是什么颜色呢?如下图:
    

    image-20220530180556406

    是黑色的,即 initial 值会将它设置为最原始的值,即标签的默认值。

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值