有些时候网页中用到了一些绝对定位的Div,因为需要事先这个Div是隐藏的,但是它所在的位置会遮挡住鼠标点击事件。这个时候可以用CCS3中的pointer-events属性来解决。
//穿透该层
pointer-events:none
//恢复点击处理
pointer-events:auto
根据情况来动态修改Div的pointer-events属性即可。
例如用JQuery可以这样写:
//穿透该层
$('#dvTest').css('pointer-events', 'none')
或者
恢复点击处理
$('#dvTest').css('pointer-events', 'auto')
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.changeColor2Pink{
background-color: pink
}
.resetBtn1Color{
background: none
}
</style>
<script type="text/javascript">
window.onload = function () {
var btn1=document.getElementById("btn1")
var btn2= document.getElementById("btn2")
btn1.onclick = function () {
btn1.className="changeColor2Pink"
}
btn2.onclick = function () {
btn1.className = "resetBtn1Color"
btn2.className = "changeColor2Pink"
}
}
</script>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
</body>
</html>