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

前端之家收集整理的这篇文章主要介绍了html – 单击滚动条时,Chrome悬停状态将被取消前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下(示例) HTML: @H_301_2@<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:

@H_301_2@#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中的一个实际错误.

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

解决方法

CSS

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

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

jQuery解决方

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

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

猜你在找的HTML相关文章