pointer-events实现通过上层点击底层
2020-05-09 本文已影响0人
实质xing
pointer-events
语法：pointer-events：auto| none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
默认值：auto
适用于：所有元素
继承性：有
动画性：否
计算值：指定值
我需要实现的效果 ：
问题：点击背景的banner图跳转相应的店铺或者专题，但是中间红色覆盖在上面，中间这部分点击不了banner图。
实现效果：点击中间这部分空白地方也可以点击进入相应的专题和店铺，移入左侧导航显示图2效果，点击三级菜单跳转相应的商品。
图1
图2
解决办法：pointer-events
（1）：图一红色框的class添加pointer-events：none
这样实现了透过上层的div,来点击后面banner的效果，但是上层左侧导航的hover和点击事件失效。
（2）：给上层需要触发hover,点击等事件的clsaa添加pointer-events：auto
即可实现想要的效果。
代码举例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
.cancel {
width: 500px;
margin: 100px auto 0px;
position: relative;
color: #FFFFFF;
}
.banner {
text-align: left;
line-height: 200px;
padding-left: 10px;
width: 500px;
background-color: royalblue;
height: 200px;
cursor: pointer;
}
.nav {
text-align: center;
line-height: 100px;
width: 200px;
left: 150px;
position: absolute;
top: 50px;
background-color: #8A6DE9;
height: 100px;
cursor: pointer;
pointer-events:none;/*nav的div在页面展示是在banner上层，所以给上层的div增加pointer-events:none;*/
}
.leftNav{
width: 100px;
height: 100px;
color: #000000;
background-color: #FFFFFF;
cursor: pointer;
pointer-events:auto;/*leftnav的div在页面展示是在nav上层，leftNav有点击事件，增加pointer-events:auto;避免leftNav点击事件失效*/
}
</style>
</head>
<body>
<div class="cancel">
<div class="banner" onclick="banner()">banner</div>
<div class="nav"><div class="leftNav" onclick="leftnav()" >leftnav</div></div>
</div>
<script type="text/javascript">
function banner() {
alert("我点击的banner")
}
function leftnav() {
alert("我点击的leftnav")
}
</script>
</body>
</html>
页面效果图
点击蓝色部分
点击紫色部分
点击白色部分
