按下鼠标时如何在 Chrome 中保持悬停状态？

Posted 2023-05-09

【中文标题】按下鼠标时如何在 Chrome 中保持悬停状态？

【英文标题】：How to keep hover states in Chrome while mouse is pressed?

【发布时间】：2012-07-06 04:45:48

【问题描述】：

当我的用户按下自定义下拉列表时，我将停止 mousedown 事件。这是为了避免在用户有效拖动鼠标时浏览器的默认文本突出显示行为。

我在处理函数中使用 jQuery event.preventDefault() 调用并返回 false。

这有预期的效果，除了在 Chrome 中它还阻止 CSS :hover 状态在鼠标仍然按下时工作。

Firefox 不会遇到同样的问题。文本突出显示被取消，当用户在鼠标仍然按下的情况下滚动项目时，:hover 状态继续工作。

是否有一种方法也可以在 Chrome 中使用？

我可以添加更多 mouseover 处理程序来添加自定义类，但我更喜欢更优雅的解决方案，以便可以在我的 CSS 中使用 :hover 伪类。

【问题讨论】：

看起来文本突出显示和事件停止是红鲱鱼。 Chrome 似乎没有激活 :hover 状态与鼠标按下。我可能会求助于 JS 鼠标悬停

当您说自定义下拉菜单时，您是指由日志列表项和锚点组成的东西吗？

是的。被翻转的项目是<li> 元素

【参考方案1】：

为了防止突出显示文本，有一个 CSS3 属性。 我在一个 SO 问题中找到了这个信息。"Prevent Highlight of Text Table"

编辑：我认为这个“How to disable text selection highlighting using CSS?”更好，因为它涵盖了更多的浏览器，从而使其更加跨浏览器。

【讨论】：

有趣。它肯定会停止选择。但是 Chrome 仍然拒绝在按下鼠标的情况下执行 :hover 状态。我想这表明文本突出显示是一个红鲱鱼。

【参考方案2】：

您可以将您的 CSS 定义为 :hover, .hover ... 然后只需在鼠标悬停时切换类

【讨论】：

我可能最终会这样做，尽管在我的问题中我说我宁愿不这样做。

对不起，我错过了你帖子的最后一点。我要责怪我的 iPhone :)

【参考方案3】：

在文档 mousedown 上，只需将此类添加到正文：

.stopSelect 
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

这将阻止文本选择。 在 mouseup 上删除该类。

【讨论】：

很高兴知道这一点，正如答案中已经提到的那样。但是，此属性在“拖动”时不会启用 :hover 状态。我正在用 JS 鼠标悬停来处理这个问题，虽然我不想这样做。