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

【问题标题】：CSS: hover state remains active after going back (Firefox)CSS：返回后悬停状态保持活动状态（Firefox）
【发布时间】：2014-02-08 07:31:40
【问题描述】：

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

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

编辑：

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：