什么可以阻止 CSS :hover 类工作？

Posted 2023-03-06

【中文标题】什么可以阻止 CSS :hover 类工作？

【英文标题】：What can prevent the CSS :hover class from working?

【发布时间】：2012-09-21 20:04:52

【问题描述】：

什么可以防止 CSS :hover 伪类被触发，无论是使用 CSS 还是 javascript？

我正在尝试调试第三方自定义日历控件中的一个非常棘手的问题。客户希望在用户将鼠标悬停在日期上时突出显示日期——这是非常标准的东西。但是有些东西顽固地阻止了:hover 类按预期工作。

我可以使用选择器定位日期单元格并操作background-color，而不会出现任何问题。但是，将 :hover 伪类添加到该选择器不起作用。

很遗憾，我无法发布任何代码，因为这是一个需要帐户才能使用的私人应用程序。老实说，意大利面条太多了，我什至不知道要包括什么……控件是用纯 JS 构建的，这里没有 jQuery，没有siree。几百行 JS，加上几百行 CSS……不知道使用 jQuery 日历控件有什么问题。

是否有一组已知的东西可以破坏:hover？这可能是一个事件传播问题，是由从onhover 事件处理程序返回false 引起的吗？

对于调试此问题还有其他建议吗？使用浏览器工具不是很有效，因为除非我悬停，否则不会触发:hover 规则。在那里抓到 22 个。

编辑：This answer 似乎是罪魁祸首。他们肯定在组合中使用了一些绝对定位......

编辑 2：使用 Chrome 的开发人员工具手动应用 :hover 状态有效，确认我的选择器不是问题。有些东西阻止了:hover 状态被触发。日历控件被实现为一个 html 表格，每周在一行中，每个日期在一个单元格中。这似乎是一个分层问题，但向单元格添加高 z-index 并没有任何作用。

【问题讨论】：

Chrome/Safari 中的网络检查器可以显示:hover 规则，如this answer 中所述。

也许是带有其他悬停选项的更精确的选择器？可能不是原因，而是可能的原因

firefox 检查器也可以显示:hover - 检查元素，然后单击工具提示的下拉菜单。

@Keyser 好主意，但我不认为是这样。我正在重新设计这个应用程序，如果应用了另一个选择器，那将是一个不同的配色方案并且非常明显。

你能发布一个 jsfiddle 的例子吗？

【参考方案1】：

Chrome 的“开发者工具”允许您切换元素的状态。也许您可以尝试一下，看看您是否能更深入地了解您遇到的问题？

【讨论】：

优秀。像这样手动应用:hover 状态证明我的选择器是正确的。

【参考方案2】：

它往往与元素的分层有关。通常，这可以通过重新分层 HTML 以使锚点位于顶部或将其设置为 position: relative 来解决。

【讨论】：

这很有帮助。在这种情况下，日历是一个表格，而日期只是单元格中的文本。不幸的是，该项目的众多优点之一是 HTML 被编译成二进制文件，因此无法编辑。我仅限于 CSS 和 JavaScript。

【参考方案3】：

您可能会在取消悬停时使用!important，这会阻止悬停。

【讨论】：

我去看看。最初的开发人员在 HTML 中使用了大量的!important 标签以及硬编码内联样式。感谢您的建议！