5

:active更改颜色，但仅在用户仍按住鼠标时。

例如：

黑色（点击）> 蓝色（释放）> 黑色

相反，我需要：

黑色（点击）> 蓝色（释放）>蓝色

有没有办法用 CSS 做到这一点？编辑：我应该提到我不希望浏览器设置访问链接的样式，所以我不能使用:visited.

4

4 回答 4

12

您可以对锚元素使用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;
}
于 2013-07-05T03:11:02.953 回答
11

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

于 2013-07-05T01:29:17.487 回答
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>

这是一个活生生的例子

于 2013-07-05T01:52:14.540 回答
0

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>

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

于 2013-07-05T01:30:01.443 回答