我在Firefox 49.0(在Linux Mint下)测试以下代码:
a{
font-size:50px;
color:gray;
font-weight:1000;
transition:color 1s;
}
a:hover{
color:black;
}
a:visited{
color:lightgray;
}

<a href="">VISITED LINK</a><br>
<a href="https://google.com/randomtext">LNK NOT VISITED</a>
&#13;
Here is a codepen如果您更喜欢这样的话。如果代码不清楚:我希望链接在访问时是恒定的lightgray,在没有访问时是灰色的,在悬停未访问的链接时是黑色的。另外,我想在这些颜色之间转换。
但是,firefox似乎首先将hover规则应用于被访问链接,然后是:visited规则,并且还在这些之间进行转换,从而闪烁。
我似乎无法找到解决方法。
修改:Chrome会按照我想要的方式显示它。
答案 0 :(得分:1)
这似乎是一个Firefox错误,转换未正确处理。
答案 1 :(得分:1)
我找到了解决方法: 您需要将悬停状态添加到访问状态。请参阅下面的代码。
a {
text-decoration: none;
color: #000000;
transition: .3s color;
}
a:hover, a:visited:hover {
color: #9097a0;
}
<a href="https://stackoverflow.com/" target="_blank">Demo Link</a>