标签:
pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
默认值:auto
适用于:所有元素
继承性:有
动画性:否
计算值:指定值
visiblepainted
值相同设置或检索在何时成为属性事件的target。
pointer-events
来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events
属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a{
position: absolute;
top: 0;
left: 0;
}
.front{
background-color: #c9e2b3;
z-index: 10;
width: 100px;
height: 100px;
pointer-events: none;
}
.back{
background-color: #f99f9f;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<a class="front" onclick="alert(‘front!‘);"></a>
<a class="back" onclick="alert(‘back!‘)"></a>
</body>
</html>
css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件
标签:
原文地址:http://www.cnblogs.com/haifeng1990/p/5239609.html