css解决层遮挡事件的问题pointer-events
目录
问题描述
解决方案
通过css样式中给外层div添加pointer-events属性。pointer-events默认有如下属性:
属性值 | 描述 |
---|---|
auto | 默认值。元素对指针事件做出反应,比如 :hover 和 click。 |
none | 元素不对指针事件做出反应。 |
initial | 将此属性设置为其默认值。参阅 initial。 |
inherit | 从其父元素继承此属性。参阅 inherit。 |
/* 层不分挡住按钮事件, 添加后按钮就可以点击了 */
pointer-events: none;
添加扣按钮就可以点击了,效果如下:
源代码
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 必须的 meta 标签 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<style>
.container {
position: absolute;
left: 10px;
top: 10px;
height: 400px;
width: 400px;
background: hsla(0, 100%, 50%, 0.5);
z-index: 9999;
/* 层不分挡住按钮事件, 添加后按钮就可以点击了 */
pointer-events: none;
}
.test-btn {
left: 200px;
top: 200px;
position: relative;
}
</style>
</head>
<body>
<div class="container"></div>
<button type="button" class="btn btn-primary test-btn">测试</button>
</body>
</html>