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

最新推荐文章于 2024-02-02 15:47:28 发布
原创 最新推荐文章于 2024-02-02 15:47:28 发布 · 7.4k 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css3 #鼠标事件 #盒子遮挡 #pointer-events
本文详细解析CSS中pointer-events属性的作用与用法，重点介绍如何通过设置none和auto值来控制网页元素是否响应鼠标事件，实现精细的交互设计。

非常简单：

外层（被遮挡的层）{
    pointer-events: none;
}

内层（要发生事件的层）{
    pointer-events: auto;
}

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

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

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

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

前端蒙版遮罩层点击事件穿透
qq_36205027的博客
02-12 1万+
<div style={{ zIndex: 1000, width: "100%", height: "4rem", position: "relative" }}> <div style={{ position: 'absolute', top: "33%", left: "45%", width:
CSS 定义一个防止点击的背景遮罩层代码
潘广宇的博客
04-12 1914
<style> .mask{ background-color: rgba(0, 0, 0, .3); position: absolute; width:100%; height:100%; z-index: 999; display: none; } .main-1{ position:relative; } </style> <div class="mai.
被遮挡元素显示到可视区域
guohao326的博客
02-26 1121
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{ padding: 0; margin: 0;
事件（操作元素 修改元素，表单）
m0_72313625的博客
08-20 787
事件的组成：事件是由三部分进行组成 事件源 事件类型 事件处理程序 我们将这三个称之为事件三要素 我们可以对里面的元素 元素属性 表单属性 进行操作和改变
如何使上层div遮住的按钮依然可以点击 使用css实现（ pointer-events:none ）
徐同保的专栏
09-27 4251
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;如何使上层div遮住的按钮依然可以点击&lt;/title&gt; &lt;style type="text/css&quot
css解决层遮挡事件的问题pointer-events
tpzmz08的专栏
07-08 1390
css解决层遮挡事件的问题pointer-events 目录 css解决层遮挡事件的问题pointer-events 问题描述 解决方案 源代码 问题描述 按钮被一个div遮挡住，无法点击按钮，如下： 解决方案 通过css样式中给外层div添加pointer-events属性。pointer-events默认有如下属性： 属性值 描述 auto 默认值。元素对指针事件做出反应，比如 :hover 和 click。 none 元素不对指针事件做出反...
添加遮罩层，实现点击穿透，实现遮罩层按钮点击，遮罩层下层点击事件
Aa12364567的博客
08-12 3114
代码】添加遮罩层，实现点击穿透，实现遮罩层按钮点击，遮罩层下层点击事件。
H5登录页 键盘挡住输入框的另类解决方案
蓝莓的博客
01-12 1793
H5登录页 键盘挡住输入框的另类解决方案 登录页有时候为了做的漂亮底部会有些图片或者其他样式，在大屏或者其他分辨率较高的手机端正常的情况下，会碰到手机分辨率低或其他小屏安卓机键盘挡住输入框的情况。常规解决方案有js获取高度做判断啊，input获取焦点后改变样式类啊什么的。最近笔者发现了一个偏方，对界面要求不那么高的情况下可以试试： 方法 只用了一行css，min-height:50
html设置整个页面遮罩,简单遮罩 实现点击按钮遮住整个页面
weixin_39849888的博客
06-03 715
function showBox() { var exits = document.getElementById("div_whole"); if (exits) { document.body.removeChild(exits); } var scrollTop = document.documentElem...
元素被另外一个元素遮住了 无法触发对应的事件怎么办
weixin_46448762的博客
09-05 752
在刷新浏览器，就可以跳过最外成遮罩 执行下面的事件。在最外层的盒子的样式属性中加。
CSS - 元素遮挡（层级/定位等等）导致无法点击下层元素解决方案
🏆 前端领域优质创作者
05-08 9011
前言 如果遇到因 层级 定位 其他原因 导致点击不到下层元素，如下图所示： 解决方案 pointer-events 文档：https://www.w3school.com.cn/cssref/pr_pointer-events.asp 不需要调整什么 z-index 层级还是相对绝对定位，直接使用 鼠标穿透属性 pointer-events。 需要注意的是，有些情况并不适用。 /* 给父元素(遮挡的元素) */ .div{ pointer-events: none; } ...
el-button按钮点击不起作用，被遮盖
m0_68428581的博客
02-02 1441
按钮点击不起作用，被遮盖。1、图示 2、解决：先relative再absolute即可
Layui前端框架中的Button添加Click事件
像蚂蚁一样工作，像蝴蝶一样生活
02-11 5340
　　引言 　　button点击事件有一个type属性，默认type是submit，有时候使用默认会出现页面自动刷新问题。 <button class="btn btn-primary" id="btnSubmit" name="btnSubmit"><i class="fa fa-save"></i>确定</button> 　　In...
锚点定位被顶部固定导航栏遮住的解决方案
Scar的博客
04-12 5248
很多网站都有一个固定在上方的导航栏，方便用户搜索和跳转到其他页面。 同时为了方便用户浏览长文档，都会加上目录，点击段落标题跳转到段落所在的位置， 如图所示： 如果使用锚点实现目录的跳转，会遇到 fixed 导航栏遮住了标题的问题。 1. 锚点定位机制 如果没有滚动条，锚点失效。 如果有滚动条，滚动条滚动到地址 hash （地址 # 号后面的内容）对应的锚点元素padding-box上边缘位置...
点击事件不生效,点击不起作用，多半是元素被遮挡。css元素被遮挡，选择不到
热门推荐
ParadiserD的博客
10-31 1万+
有过js控制点击不生效的时候吗，这时就要考虑你的元素是否被其他元素遮挡了。这里说的遮挡并不是看不到。而是能看到，却无法透过另一元素选中它。 可以试一下以下两种方案： 1、css调节z-index 首先要考虑的是更外层的元素遮挡了靠里层的元素。比如外层遮挡为一个div（.card）被遮挡的是一个input框为（.input-space） 这时就要把遮挡它的元素的css中的z-index调的比他
Html 点透镂空遮罩,CSS实现镂空遮罩
weixin_35761085的博客
05-31 642
前一阵子面试被问题到这个问题，突然懵逼了，脑子一片空白，以前知道这种效果，比如什么值得买的改版引导页面：当时再紧张也应该打出一种实现方法，就是什么值得买这种使用图片实现它首先加了一个半透明的黑色蒙层(background-color: rgba(0,0,0,.8))然后添加提前制作好的图片作为子元素，然后通过决定定位，让图片与被遮盖的部分的定位相同，制造出一种假的镂空的效果虽然这种方式处理定位有一...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值