什么因素会阻止 CSS 的 :hover 类起作用?

10 浏览
0 Comments

什么因素会阻止 CSS 的 :hover 类起作用?

CSS或JavaScript有什么可以阻止触发CSS的:hover伪类的方法吗?

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

我可以使用选择器定位日期单元格并操纵背景颜色而没有任何问题。但是,将:hover伪类添加到该选择器中不起作用。

不幸的是,我不能发布任何代码,因为这是一个需要帐户才能使用的私有应用程序。老实说,代码很混乱,我甚至不知道应该包括什么...该控件是使用纯JS构建的,没有使用jQuery,代码有几百行,外加上百行的CSS...不知道使用jQuery日历控件有什么问题。

有没有已知的可能破坏:hover的一些因素?可能是由于从onhover事件处理程序返回false引起的事件传播问题吗?

还有其他建议来调试这个问题吗?使用浏览器工具不太有效,因为除非我悬停,否则不会触发:hover规则。这是个进退两难的问题。

编辑:这个答案似乎是一个可能的罪魁祸首。他们肯定在混合中使用了一些绝对定位...

编辑2:使用Chrome的开发者工具手动应用:hover状态有效,确认了我的选择器没有问题。有些东西阻止了:hover状态的触发。该日历控件是以HTML表格的形式实现的,每周一行,每个日期一个单元格。这似乎是一个图层问题,但是将单元格的z-index设为高值没有任何效果。

0
0 Comments

问题的原因:可能是选择器有错误导致CSS :hover类无法正常工作。

解决方法:使用Chrome的开发者工具手动应用:hover状态来验证选择器是否正确。

0
0 Comments

原因:CSS的:hover类无法正常工作通常与元素的层叠有关。通常可以通过重新调整HTML的层叠顺序,使锚点元素处于顶部,或将其设置为position: relative来解决。

解决方法:由于HTML被编译成二进制文件,无法直接编辑,因此只能通过CSS和JavaScript来解决。

0
0 Comments

使用!important在取消悬停状态时会阻止悬停效果。

我会看一下。原始开发者在HTML中使用了许多!important标签,同时还使用了硬编码的内联样式。谢谢建议!

0