pointer-events
語法：pointer-events：auto| none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
默認(rèn)值：auto
適用于：所有元素
繼承性：有
動畫性：否
計算值：指定值
我需要實現(xiàn)的效果 ：
問題：點(diǎn)擊背景的banner圖跳轉(zhuǎn)相應(yīng)的店鋪或者專題，但是中間紅色覆蓋在上面，中間這部分點(diǎn)擊不了banner圖。
實現(xiàn)效果：點(diǎn)擊中間這部分空白地方也可以點(diǎn)擊進(jìn)入相應(yīng)的專題和店鋪，移入左側(cè)導(dǎo)航顯示圖2效果，點(diǎn)擊三級菜單跳轉(zhuǎn)相應(yīng)的商品。
圖1
圖2
解決辦法：pointer-events
（1）：圖一紅色框的class添加pointer-events：none
這樣實現(xiàn)了透過上層的div,來點(diǎn)擊后面banner的效果，但是上層左側(cè)導(dǎo)航的hover和點(diǎn)擊事件失效。
（2）：給上層需要觸發(fā)hover,點(diǎn)擊等事件的clsaa添加pointer-events：auto
即可實現(xiàn)想要的效果。
代碼舉例
<!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有點(diǎn)擊事件，增加pointer-events:auto;避免leftNav點(diǎn)擊事件失效*/
}
</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("我點(diǎn)擊的banner")
}
function leftnav() {
alert("我點(diǎn)擊的leftnav")
}
</script>
</body>
</html>
頁面效果圖
點(diǎn)擊藍(lán)色部分
點(diǎn)擊紫色部分
點(diǎn)擊白色部分
