我认为仅凭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");
}
);
});