CSS中有没有一个“指针-事件:hoverOnly`”或者类似的东西？
CSS中有没有一个“指针-事件:hoverOnly`”或者类似的东西？
提问于 2014-03-04 17:52:56
我刚刚在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;
}回答 5
Stack Overflow用户
回答已采纳
发布于 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
Stack Overflow用户
发布于 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中支持
Stack Overflow用户
发布于 2016-09-13 18:38:16
你还可以检测悬停在不同的元素上，并将样式应用于它的子元素，或者使用其他css选择器，如相邻子元素，等等。
不过，这取决于你的情况。
在父元素上悬停。我这样做了：
.child {
pointer-events: none;
background-color: white;
}
.parent:hover > .child {
background-color: black;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22168420
复制相关文章
相似问题