我刚刚在CSS中使用了pointer-events
属性。
我有一个对除:hover
之外的所有鼠标事件都不可见的div
。
因此,所有的单击命令都会通过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;
}
发布于 2014-03-04 19:05:38
我认为光靠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");
}
);
});
这是JSFiddle:http://www.jsfiddle.net/ReZ9M
发布于 2015-07-11 17:06:43
仅悬停。这很简单。没有JS..。也防止链接默认操作。
a:hover {
color: red;
}
a:active {
pointer-events: none;
}
<a href="www.google.com">Link here</a>
编辑:在IE 11和更高版本的http://caniuse.com/#search=pointer-events中支持
发布于 2016-09-13 18:38:16
你还可以检测悬停在不同的元素上,并将样式应用于它的子元素,或者使用其他css选择器,如相邻子元素,等等。
不过,这取决于你的情况。
在父元素上悬停。我这样做了:
.child {
pointer-events: none;
background-color: white;
}
.parent:hover > .child {
background-color: black;
}
https://stackoverflow.com/questions/22168420
复制相似问题