我有一个链接,当我将鼠标悬停在它上面时,我希望它可以转换为另一种颜色。但是,当我单击它时,它应该恢复正常,就像我将鼠标悬停在它上面之前一样。
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;
}
添加这个可以防止发生任何颜色转换,并且访问过的链接仍然带有下划线。
最佳答案
anchor (链接)上的伪类应该以特定顺序声明。顺序是:链接、已访问、悬停、事件。
将您的 :visited
规则移到 :hover
之前,它将起作用。
片段:
a {
text-decoration: none; color: #0f0;
transition: all 0.3s;
}
a:visited { color: #0f0; }
a:hover { color: #f00; }
<a href="#">Link 1</a> | <a href="#">Link 2</a>
引用:https://developer.mozilla.org/en-US/docs/Web/CSS/%3Avisited
...This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited rule after the :link rule but before the other ones, defined in the LVHA-order: :link — :visited — :hover — :active.
关于css - 访问过的链接有不需要的文字修饰,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34173627/