Styling active anchor elements with css
Question
I have some trouble to find a css solution for having an active anchor colored...
Why are the active anchors not red so that if clicked on "momo" momo keeps red? Or is active the wrong pseudoclass for that?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
a:active{
color:red;
}
a:hover{
color:yellow;
}
</style>
</head>
<body>
<ul> Navigation
<li class="subli"><a href="#momo">momo</a></li>
<li class="subli"><a href="#ipsi">ipsi</a></li>
</ul>
</body>
</html>
Thanks Juru
6 answers
solution1
4 ACCPTED 2012-02-24 13:54:59
:active means "While being activated" eg when it is focused and the enter key is pressed or while it is hovered and the mouse button is being depressed. (Note that since you have have :hover after :active you'll always override it for mouse activates)
There is no pseudo-class for "Anchor with an href value that resolves to the current location". For that you need to need to modify the HTML (preferably before it gets to the browser, but you can use JS as well).
solution2
0 2012-02-24 13:54:47
Switch the order you have your styling setup for your anchor tags
Change this
a:active{
color:red;
}
a:hover{
color:yellow;
}
To this
a:hover{
color:yellow;
}
a:active{
color:red;
}
:active only occurs when you click and hold on the element or the element is focused and you hit enter.
If you want to show the active url as a different color you are going to have to add a class to the current active element and style that class with the color you want
solution3
0 2012-02-24 13:55:12
The styles cascade, you need to switch them.
a:hover {
color:yellow;
}
a:active {
color:red;
}
solution4
0 2012-02-24 13:57:28
I think you want to use visited not active
a:visited {color:red;}
Active activates only onClick
Visited stays red after you clicked
solution5
-1 2019-03-16 21:29:11
Besides, you can use the target pseudo-class , which is pretty well supported already, to style the element referenced by the anchor.
<a href="#this-element">Click here.<div>
<div id="this-element">It's going to be red.<div>
<style>
#this-element:target{
color:red;
}
<style>
solution6
-2 2012-02-24 13:54:27
删除:active属性，只需设置a{color:red}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.