html – 单击滚动条时,Chrome悬停状态将被取消

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

重现步骤：

>将鼠标悬停在“悬停我！”上文本打开魔法面板
>快速单击滚动条几次

预期行为：

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

实际行为：

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

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

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

@H_502_28@解决方法 CSS

我的第一个想法是应用指针事件：无; #magic div.这确实解决了你提到的问题但也阻止了我完全与垂直滚动条交互,我猜这是不好的！

使用jquery防止#magic div上的默认点击行为似乎可以解决问题.

jquery解决方案

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

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

总结

以上是内存溢出为你收集整理的html – 单击滚动条时,Chrome悬停状态将被取消全部内容，希望文章能够帮你解决html – 单击滚动条时,Chrome悬停状态将被取消所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。