html - 单击滚动条时，Chrome 悬停状态消失

Question

我有以下(示例)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/

重现步骤:

1. 将鼠标悬停在“悬停我!”打开魔术面板的文字
2. 快速点击滚动条数次

预期行为:

• 无论您点击多少次或多久点击一次，都不应取消悬停

实际行为:

• 很多时候，悬停被取消并且悬停面板被关闭。

---

我只在 Windows 版 Chrome 上重现了这一点。它不会在 Mac 或 Firefox 上重现。这让我相信这是 Chrome 中的一个实际错误。

我想知道是否有一种解决方法可以防止悬停关闭。

Answer 1

CSS

我的第一个想法是将 pointer-events: none; 应用于 #magic div。这确实解决了您提到的问题，但也阻止了我与垂直滚动条完全交互，我猜这不太好!

用 jQuery 阻止 #magic div 上的默认点击行为似乎可以解决问题。

jQuery 解决方案

$(document).ready(function() {
    $('#magic').click(function(e) {
        e.preventDefault();
    });
});

工作演示: https://jsfiddle.net/hak8zuok/5/