在CSS中是否有`pointer-events：hoverOnly`或类似的东西？

刚刚玩过CSS中的pointer-events属性。

我有一个div ，我想对所有的鼠标事件隐藏，除了: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; }

我不认为只用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

只hover。 这很容易。 没有JS …防止链接默认行动了。 

 a:hover { color: red; } a:active { pointer-events: none; } 
 <a href="www.google.com">Link here</a>

“偷”Xanco的答案，但没有丑陋，丑陋的jQuery。

HTML：（注意DIV是相反的顺序） 

 <div id="bottomlayer" class="layer">Bottom layer</div> <div id="toplayer" class="layer">Top layer</div>

CSS： 

 .layer { position:absolute; top:0px; left:0px; height:400px; width:400px; } #bottomlayer {z-index:10} #toplayer {z-index:20; pointer-events:none; background-color:white; display:none} #bottomlayer:hover~#toplayer {display:block}

更新小提琴

您还可以检测hover在不同的元素，并将样式应用到它的孩子，或使用其他CSSselect器，如邻近的孩子等。

这取决于你的情况。

在父元素hover。 我做到了这一点： 

 .child { pointer-events: none; background-color: white; } .parent:hover > .child { background-color: black; }

纯粹的CSS解决scheme，您的要求（不透明属性只是为了说明过渡的需要）： 

 .hoverOnly:hover { pointer-events: none; opacity: 0.1; transition-delay: 0s; } .hoverOnly { transition: ,5s all; opacity: 0.75; transition-delay: 2s; }

它能做什么：

当鼠标进入框时，它会触发:hover状态。 但是，在这种状态下，指针事件被禁用。

但是如果你不设置转换定时器，当鼠标移动时，div将取消hover状态。 当鼠标移动到元素内时，hover状态将闪烁。 你可以通过使用上面的代码和不透明属性来理解这一点。

设置hover状态转换的延迟可以修复它。 2s值可以调整，以满足您的需求。

积分转换调整： patad 这个答案 。

Interesting Posts