单击滚动条时,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. 快速单击滚动条几次

预期行为:

• 无论您点击多少次或多少次,都不应忽略悬停

实际行为:

• 很多时候,悬停被解雇,悬停面板关闭.

---

我已经设法在Chrome for Windows上重现这一点.它不能在Mac或Firefox上重现.这让我相信这是Chrome中的一个实际错误.

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

Answer 1

CSS

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

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

jQuery 解决方案

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

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