:hover 状态在使用浏览器后退按钮返回浏览器后仍然处于活动状态答案

【问题标题】：:hover state is still active after going back in browser by using browser back-button:hover 状态在使用浏览器后退按钮返回浏览器后仍然处于活动状态
【发布时间】：2016-05-30 17:49:29
【问题描述】：

我将鼠标悬停在导航中的一个链接上，它改变了它的颜色。

我在 Firefox 和 Safari 中遇到了一个奇怪的问题：当我在鼠标悬停后返回浏览器（通过用鼠标单击后退按钮）时，链接的颜色不会改变为原始状态。它具有悬停状态。

只有在鼠标重新进入站点后，颜色才会变回黑色。我该怎么做才能在页面加载时立即将链接的颜色改回黑色。为什么悬停状态似乎在页面加载时处于活动状态？

当我将链接悬停在我直接用鼠标转到浏览器的后退按钮时，就会发生这种情况。

非常感谢！

我的CSS：

a {
    outline: none;  
    border: none;
    text-decoration: none;
}

a:link {
    color: black;
} 

a:hover, a:active {
    color: rgb(120,140,150);
}

【问题讨论】：

标签： html css

【解决方案1】：

遇到了完全相同的问题。为我解决的问题是将:hover 状态放入媒体查询中，使其仅出现在桌面中。

像这样：

@media (min-width: 992px) {
    a:hover {
        color: rgb(120,140,150);
    }
}

【讨论】：

【解决方案2】：

解决办法

只需替换...

a {
    outline: none;  
    border: none;
    text-decoration: none;
}

a:link {
    color: black;
} 

a:hover, a:active {
    color: rgb(120,140,150);
}

...与...

a {
    outline: none;  
    border: none;
    text-decoration: none;
    color: black;
} 

a:hover {
    color: rgb(120,140,150);
}

（请参阅this Fiddle 以获取演示）

...您的链接应该可以正常工作。

【讨论】：

我认为这不是 OP 所指的......他的意思是当他返回时出现 ACTIVE 状态，而不是访问的链接状态。我也见过；浏览器不会在背面重绘页面。
感谢您的帮助，但是当我返回浏览器时，这不会改变 :active 状态。不幸的是。
@buckdanny ：我刚刚编辑了我的答案。你可以试试这个代码，看看这是否能解决你的问题？
不幸的是，这并没有解决它。 @andi 写的内容听起来不错，但是如何重新绘制背面的页面？
@buckdanny ：你能给我们演示一下到底出了什么问题吗？

【解决方案3】：

如果您实际上不需要活动状态并且悬停状态就足够了，我认为您可以从 CSS 中删除 a:active 以避免该问题。您可以保留 a:hover 原样，因为这不是问题的原因。

【讨论】：