CSS 单击时如何更改链接颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17479912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change link color when clicked?
提问by Sunny
:activechanges the color but only while the user is still holding down the mouse.
:active仅在用户仍按住鼠标时更改颜色。
for example:
例如：
black (click) > blue (release) > black
黑色（点击）> 蓝色（释放）> 黑色
Instead, I need:
相反，我需要：
black (click) > blue (release) > blue
黑色（点击）> 蓝色（释放）>蓝色
Is there a way to do this with CSS? Edit: I should mention that I don't want the browser to style visited links, so I can't use :visited.
有没有办法用 CSS 做到这一点？编辑：我应该提到我不希望浏览器设置访问过的链接的样式，所以我不能使用:visited.
回答by bitfiddler
Use :visited to set the color of links that have been visited.
使用 :visited 设置已访问链接的颜色。
回答by thgaskell
You could use a combination of the tabindexattribute and :focusselector to your anchor elements.
您可以对锚元素使用tabindex属性和:focus选择器的组合。
HTML
HTML
<a href="#" tabindex="1">Stays blue</a>
CSS
CSS
a {
color: black;
}
a:active {
color: blue;
}
a[tabindex]:focus {
color:blue;
outline: none;
}
回答by raam86
In case you are not actually directing users to a new page and just want to change anchor color use javascript:
first you have to Give your links a class like .changeable
如果您实际上并没有将用户引导到新页面，而只想更改锚点颜色，请使用 javascript：首先，您必须为链接添加一个类 .changeable
then you can use javascriptlike this:
那么你可以像这样使用javascript：
var links = document.getElementsByClassName('changeable');
function changeColor(e) {
e.target.style.color = e.target.style.color ? null : 'red';
}
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', changeColor);
}
and the html:
和html：
<a class="changeable">Change me</a>
here a live example
这是一个活生生的例子
回答by Van Vu
http://www.w3schools.com/css/css_link.asphope this help ^.^.
http://www.w3schools.com/css/css_link.asp希望这有助于^.^。
set visited/ unvisited color as the same.
将访问/未访问颜色设置为相同。
<!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>
all of them should have blue color. As you you don't want browser to remember visited link I believe that will a much more complicated answer since U want to change the behavior of how browser should be working.
他们都应该有蓝色。由于您不希望浏览器记住访问过的链接，我相信这将是一个更复杂的答案，因为您想更改浏览器应该如何工作的行为。
