Question

我有一个链接，当我将鼠标悬停在其上时，我希望它转换为另一种颜色。然而，当我点击它时，它应该恢复正常，就像我在它上面盘旋之前一样。

a {
  -o-transition:.3s;
  -ms-transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  transition:.3s;
  text-decoration: none;
  color: #ffffff;
}

a:hover { 
  text-decoration: none;
  color: #66caff; 
}

当我悬停时，它工作正常，但在我访问链接后，我收到了不需要的下划线，并且它变为紫色。它应该像我点击之前一样。

a:visited { 
  text-decoration: none;
  color: #ffffff; 
}

添加此项可防止发生任何颜色过渡，并且访问过的链接仍然带有下划线。

Answer 1

锚点上的伪类（ links ）应按特定顺序声明。订单是：链接，访问，悬停，活动。

将:visited规则转移到:hover之前，它会起作用。

<强>段：

＆＃13;

a {
  text-decoration: none; color: #0f0;
  transition: all 0.3s;
}

a:visited { color: #0f0; }
a:hover { color: #f00; }

＆＃13;

<a href="#">Link 1</a> | <a href="#">Link 2</a>

＆＃13;

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/%3Avisited

...此样式可能会被任何其他与链接相关的内容覆盖伪类，即：link，：hover，和：active，出现在后续规则。为了设置适当的链接，你需要把：visit规则放在：link规则之后但在其他之前，在LVHA订单中定义:: link - ：visited - ：hover - ：active。

Answer 2

代码看起来很好。我从您的代码中创建了fiddle。

   HTML : 
   <a href="/">VISIT</a>

CSS与您在问题中提到的相同。这对我来说可以。请提及您用于测试代码的操作系统和浏览器及其版本。它可能是特定版本或操作系统特有的问题。

访问链接有不需要的文字装饰

2 个答案: