在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; } 

5 Solutions collect form web for “在CSS中是否有`pointer-events:hoverOnly`或类似的东西?”

我不认为只用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 这个答案 。

  • 使用Javascript创build表格
  • 代表分数的math符号是什么?
  • 使用JavaScript获取选定的选项文本
  • 添加额外的数据来select使用jQuery的选项
  • 内部图像的HTML / CSS六angular形
  • 获取dynamic插入的HTML与knockoutjs一起工作
  • 无法从Firefox中删除大纲/虚线边框select下拉菜单
  • 将省略号应用于多行文本
  • 如何禁用CSS或JavaScript文本select?
  • 如何风格dt和dd,所以他们在同一行?
  • Javascript - 将HTML追加到没有innerHTML的容器元素