刚刚在CSS中处理了pointer-events个属性.
我有一个div，我希望除了:hover之外，所有鼠标事件都看不见它.
因此，所有的单击命令都会通过div到达它下面的命令，但是div可以报告鼠标是否仍然在它上面.
有没有人能告诉我这件事能不能做到？
HTML:
<div class="layer" style="z-index:20; pointer-events:none;">Top layer</div>
<div class="layer" style="z-index:10;">Bottom layer</div>
CSS:
.layer {
position:absolute;
top:0px;
left:0px;
height:400px;
width:400px;
}
我认为仅靠CSS是不可能实现您的目标的.但是，正如其他贡献者所提到的，在jQuery中实现这一点非常容易.我是这样做的:
HTML
<div
id="toplayer"
class="layer"
style="
z-index: 20;
pointer-events: none;
background-color: white;
display: none;
"
>
Top layer
</div>
<div id="bottomlayer" class="layer" style="z-index: 10">Bottom layer</div>
CSS(未更改)
.layer {
position:absolute;
top:0px;
left:0px;
height:400px;
width:400px;
}
jQuery
$(document).ready(function(){
$("#bottomlayer").hover(
function() {
$("#toplayer").css("display", "block");
},
function() {
$("#toplayer").css("display", "none");
}
);
});
这是JSFdle:http://www.jsfiddle.net/ReZ9M