:active 可以改变颜色，但只有在用户仍按住鼠标时才有效。
例如：
黑色（单击）> 蓝色（释放）> 黑色
相反，我需要：
黑色（单击）> 蓝色（释放）> 蓝色
是否有一种使用CSS实现这个效果的方法？编辑：我应该提到我不想让浏览器渲染已访问的链接，所以我不能使用:visited。
点击后如何更改链接颜色？
11
- Sunny
3
我不想让浏览器记住已访问的链接。还有其他方法吗？ - Sunny
1为什么你不想让浏览器记住已访问的链接，但在点击后改变颜色？也许你可以考虑在特定链接被点击时设置一个标志，并根据该标志更改链接颜色... - icedwater
因为在加载下一页的瞬间，我希望颜色保持蓝色，但在新页面加载时不再是蓝色。 - Sunny
4个回答
19
使用 :visited 来设置已访问链接的颜色。
- bitfiddler
1
我不希望浏览器记住已访问的链接，我应该澄清一下。还有其他方法吗？ - Sunny
16
您可以使用tabindex属性和:focus选择器的组合来处理锚点元素。
HTML
<a href="#" tabindex="1">Stays blue</a>
CSS
a {
color: black;
}
a:active {
color: blue;
}
a[tabindex]:focus {
color:blue;
outline: none;
}
- thgaskell
3
3如果我错了（而且晚了2年），但是:focus本身不就足以实现海报所要求的吗？ - BevansDesign
@BevansDesign 看起来现在大多数浏览器都是这样！我想当我写这个答案时，Chrome 最近从 WebKit 引擎切换过去了。但是，Safari 仍然需要
tabindex 属性才能使其工作。 - thgaskell我在我的页面中有一个书签。当我点击滚动到匹配哈希href的div的链接时，它不起作用。 - Mohammad Abu Musâ Robı
4
http://www.w3schools.com/css/css_link.asp希望这可以帮到您 ^.^.
将已访问/未访问的颜色设置为相同。
<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#000000;} /* unvisited link is black*/
a:visited {color:#000000;} /* visited link is black (reverse the color back to black)*/
a:hover {color:#0000FF;} /* mouse over link (blue when mouse over)*/
a:active {color:#0000FF;} /* selected link (blue in the split second which you loading the page.)*/
</style>
</head>
<body>
<p><b><a href="http://google.com">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>
所有这些都应该是蓝色的。由于您不希望浏览器记住已访问的链接，我认为这将是一个更加复杂的答案，因为您想改变浏览器的工作方式。
- Van Vu
2
有比w3schools更好的资源，比如MDN https://developer.mozilla.org/zh-CN/docs/Web/CSS/:visited同时请尽量不要写得像在给女友发短信一样。 - raam86
@raam86：对于之前的错误发布行为感到抱歉。
顺便说一句，不知道其他事实W3School是否提供了错误信息。至少在这个问题上是正确的，简单明了，可以解决问题...
祝你有美好的一天。 - Van Vu
1
如果您不是要将用户重定向到新页面，而只是想更改锚点颜色，请使用JavaScript：
首先，您需要为链接添加一个类，例如
.changeable
然后，您可以像这样使用JavaScript：var links = document.getElementsByClassName('changeable');
function changeColorToRed(e) {
e.target.style.color = e.target.style.color ? null : 'red';
}
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', changeColorToRed);
}
以及HTML代码：
<a class="changeable">Change me</a>
这里是一个实时的示例
- raam86
4
它正在将用户引导到一个新页面。我只想让链接保持蓝色，直到加载下一页。没有纯CSS的方法可以做到这一点吗？ - Sunny
你想要两件截然不同的事情。bitfiddler的回答完美地适合你。如果你不想使用visited行为，可以使用CSS。 - raam86
我不想为已访问的链接设置样式...因为那样链接会永远是蓝色的。我只希望在点击链接直到新页面加载时它才是蓝色的。 - Sunny
是的，但这就是为什么我正在检查是否有CSS解决方案，以便我可以避免这种情况。 - Sunny
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接