pointer-events實現(xiàn)通過上層點擊底層

pointer-events

默認(rèn)值：auto

適用于：所有元素

繼承性：有

動畫性：否

計算值：指定值

我需要實現(xiàn)的效果：

問題：點擊背景的banner圖跳轉(zhuǎn)相應(yīng)的店鋪或者專題，但是中間紅色覆蓋在上面娶聘，中間這部分點擊不了banner圖沽瞭。

實現(xiàn)效果：點擊中間這部分空白地方也可以點擊進(jìn)入相應(yīng)的專題和店鋪绣否，移入左側(cè)導(dǎo)航顯示圖2效果坎匿，點擊三級菜單跳轉(zhuǎn)相應(yīng)的商品。

圖1

圖2

解決辦法：pointer-events

（1）：圖一紅色框的class添加pointer-events：none

這樣實現(xiàn)了透過上層的div,來點擊后面banner的效果捡鱼，但是上層左側(cè)導(dǎo)航的hover和點擊事件失效拐叉。

（2）：給上層需要觸發(fā)hover,點擊等事件的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有點擊事件，增加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>

頁面效果圖

點擊藍(lán)色部分

點擊紫色部分

點擊白色部分

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者