如何让被遮挡层可以进行事件点击？（纯CSS方法）

张宪坤发布于2019-08-30 15:54 / 1140人阅读

摘要：欢迎关注前端小讴的，阅读更多原创技术文章非常简单外层被遮挡的层内层要发生事件的层属性本身有很多取值，但只有和可以用在浏览器上，其他都只能应用在上取值元素永远不会成为鼠标事件的取值与属性未指定时的表现效果相同即将元素恢复成为鼠标事件的

欢迎关注前端小讴的github，阅读更多原创技术文章

非常简单：

外层（被遮挡的层）{
    pointer-events: none;
}
 
内层（要发生事件的层）{
    pointer-events: auto;
}

pointer-events属性本身有很多取值，但只有none和auto可以用在浏览器上，其他都只能应用在SVG上

取值none：元素永远不会成为鼠标事件的target

取值auto：与pointer-events属性未指定时的表现效果相同（即将元素恢复成为鼠标事件的target）

这里不要忘了给内层添加auto属性，否则被外层包裹的所有内层无法成为鼠标事件的target了

服务器托管超融合服务器纯CSS 点击事件鼠标点击事件绑定点击事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117057.html

【小案例】基于色键技术的纯客户端实时蒙版弹幕

摘要：组件提供了一系列的操作接口以方便用户对弹幕的相关特性进行定制。对于这种类型的图像，我们可以使用色键的方式进行抠图生成蒙版。其中，用于更新蒙版的接口为。导读：本文内容是笔者最近实现的 web 端弹幕组件—— Barrage UI 的一个延伸。在阅读本文的实例和相关代码之前，不妨先浏览项目文档，对组件的使用方式和相关接口进行了解。各位童鞋如果经常上 B 站（bilibili.com） ...

muzhuyu 2019-08-23 14:50 评论0 收藏0
更丰富的网页多图层效果：css混合模式

摘要：与绘制顺序密切相关的概念是层叠上下文。把正常也算上的话，现在网页里可用的混合模式一共种。因此，正片叠底是一个变暗的混合模式。需要注意的是，其中这个位于最下层的背景该元素无背景色，它的混合模式其实是没有作用的，可以认为就是默认值。图层在Photoshop等图像编辑软件里，图层是最基础的概念之一。我们平时看一张照片，就可能想到远处的背景、近处的人物这样的描述，这其实就是在划分图层。多个...

Ku_Andrew 2019-08-30 12:44 评论0 收藏0
CSS中用 opacity、visibility、display 属性将元素隐藏的对比分析

摘要：说明用来设置透明度定义建立布局时元素生成的显示框类型用来设置元素是否可见。总的来说，使用和属性，自身的事件不会触发，而使用属性，自身绑定的事件还是会触发的。说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见。 opacity、visibility、display 这三个属性分别取值 0...

rollback 2019-08-29 15:34 评论0 收藏0
CSS中用 opacity、visibility、display 属性将元素隐藏的对比分析

摘要：说明用来设置透明度定义建立布局时元素生成的显示框类型用来设置元素是否可见。总的来说，使用和属性，自身的事件不会触发，而使用属性，自身绑定的事件还是会触发的。说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见。 opacity、visibility、display 这三个属性分别取值 0...

yanest 2019-08-02 10:35 评论0 收藏0