CSS：返回后悬停状态保持活动状态（Firefox）

Posted 2023-03-06

【中文标题】CSS：返回后悬停状态保持活动状态（Firefox）

【英文标题】：CSS: hover state remains active after going back (Firefox)

【发布时间】：2014-02-08 07:31:40

【问题描述】：

我尝试对链接应用两种不同的样式：悬停时和未悬停时。虽然这在 Chrome 和 Opera 中完美运行，但当我在 Firefox 或 Midori 中点击链接，然后通过单击导航栏中的“返回”按钮返回时，链接仍然看起来像是被悬停在上面。只要我将光标移回网站的任何部分，它就会恢复正常。

这是与 webkit 相关的行为吗？有什么方法可以避免吗？

编辑：

我发现了一个下拉菜单的官方 Mozilla 演示（这是我实际上正在尝试做的），它有完全相同的问题：https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html

当点击一个菜单选项然后返回时，之前打开的子菜单仍然打开，直到鼠标悬停在网站上。

【问题讨论】：

Mozilla 演示没有有效的链接，因此很难重现您所说的场景。我建议在 JSFiddle 或类似的东西中快速拼凑一些东西，以便这里的好人可以更好地提供帮助。

您是否尝试使用所需颜色设置伪选择器？ Smt 像这样：jsbin.com/viwuhemiqi 如果有帮助，请告诉我。谢谢。

【参考方案1】：

遵循 LOVEHATE 规则。 LOVEHATE 是一种助记技术，可帮助记住链接、已访问、悬停和活动。您的样式应始终规定这些链接状态中的每一个，并且始终按此特定顺序。例如：

a:link color: #333;
a:visited color: #333;
a:hover color: #999;
a:active color: #333;