使用带有 :hover 和 :visited 的过渡时，Firefox 链接颜色闪烁

Question

我正在 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>

Here is a codepen 如果你更喜欢。如果代码不清楚：我希望链接在访问时保持浅灰色，未访问时为灰色，悬停未访问链接时为黑色。另外，我想在这些颜色之间进行转换。

但是，firefox 似乎在悬停时首先将 :hover 规则应用于访问过的链接，然后是 :visited 规则，并在这些规则之间进行转换，从而导致闪烁。

我似乎找不到解决方法。

编辑：Chrome 以我想要的方式显示它。

Answer 1

这似乎是一个 Firefox 错误，没有正确处理过渡。

Answer 2

我找到了解决方法： 您需要将悬停状态添加到已访问状态。请参阅下面的代码。

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>