我有以下(示例)HTML:
<div id="target">
Hover me!
<div id="magic">
Significant amounts of HTML, enough to cause scroll
Excluding to keep the post concise
</div>
</div>
以及以下(示例)CSS:
#magic {
display: none;
width: 500px;
height: 500px;
overflow: auto;
}
#target:hover #magic {
display: block;
}
您可以在此处查看示例:https://jsfiddle.net/hak8zuok/1/
重现步骤:
- 将鼠标悬停在“悬停我!”打开魔术面板的文字
- 快速点击滚动条数次
预期行为:
- 无论您点击多少次或多久点击一次,都不应取消悬停
实际行为:
- 很多时候,悬停被取消并且悬停面板被关闭。
我只在 Windows 版 Chrome 上重现了这一点。它不会在 Mac 或 Firefox 上重现。这让我相信这是 Chrome 中的一个实际错误。
我想知道是否有一种解决方法可以防止悬停关闭。
最佳答案
CSS
我的第一个想法是将 pointer-events: none;
应用于 #magic
div。这确实解决了您提到的问题,但也阻止了我与垂直滚动条完全交互,我猜这不太好!
用 jQuery 阻止 #magic
div 上的默认点击行为似乎可以解决问题。
jQuery 解决方案
$(document).ready(function() {
$('#magic').click(function(e) {
e.preventDefault();
});
});
关于html - 单击滚动条时,Chrome 悬停状态消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45547747/