Question

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

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

只有在鼠标重新进入网站后，颜色才会变回黑色。如何在页面加载时立即将链接颜色更改为黑色。为什么悬停状态似乎在页面加载上有效？

当我将鼠标直接拖到浏览器的后退按钮后，我将鼠标悬停在链接上。

非常感谢！

我的css：

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

a:link {
    color: black;
} 

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

Answer 1

解决方案

只需替换......

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）

...您的链接应该按预期工作。

Answer 2

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

Answer 3

有完全相同的问题。对我来说，解决此问题的方法是将:hover状态放入媒体查询中，使其仅显示在桌面中。

赞：

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

：使用浏览器后退按钮

我的css：

3 个答案:

解决方案