Question

:active只会在用户按住鼠标时更改颜色。

例如：

黑色（点击）＆gt;蓝色（释放）＆gt;黑

相反，我需要：

黑色（点击）＆gt;蓝色（释放）＆gt;的蓝色

有没有办法用CSS做到这一点？ 编辑：我应该提一下，我不希望浏览器为访问过的链接设置样式，因此我无法使用:visited。

Answer 1

使用：visited设置已访问过的链接的颜色。

Answer 2

您可以将tabindex属性和:focus选择器的组合用于锚元素。

http://jsfiddle.net/dcNzt/

HTML

<a href="#" tabindex="1">Stays blue</a>

CSS

a {   
    color: black;   
}

a:active {
    color: blue;
}

a[tabindex]:focus {
    color:blue;
    outline: none;
}

Answer 3

如果您实际上没有将用户引导到新页面并且只想更改锚点颜色，请使用javascript：首先，您必须为您的链接提供类似.changeable

的类

然后您可以像这样使用 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);
}

和 html ：

<a class="changeable">Change me</a>

这里有一个实时example

Answer 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>

所有这些都应该是蓝色。因为你不希望浏览器记住访问链接，我相信这将是一个更复杂的答案，因为你想改变浏览器应该如何工作的行为。

单击时如何更改链接颜色？

4 个答案:

HTML

CSS