|
|
Posted by Andy Dingley on 06/22/06 15:36
Jim Higson wrote:
> Florida Flamingo wrote:
>
> > What exactly does using A:active do vs the others:
> Not sure exactly what the specs say, but in practice, it's the style applied
> if you tab over the link.
That's a:focus, not a:active
a:active applies (very briefly) when you _have_ (past tense) activated
the link, but navigation hasn't happened yet (future tense). You also
see it when the link has been "activated elsewhere", such as after
pressing Back, or when opening a link in a new tab. Firefox seems a
little buggy here and a control-click into a new tab leaves the old
link with quite a persistent :active state that takes a lot of nav
before it gets reset.
Spec (such as it is) is over here
http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes
Here's a demo fragment
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<title>CSS pseudo-class selector demostration</title>
<style type="text/css">
body {
color: #000000;
background-color: #ffffff;
font-family: sans-serif;
font-weight: bolder;
}
ul { margin: 3em }
a {
text-decoration: underline;
color: #59BF47;
}
..link-styles .link,
a:link {
color: #BF47BC;
}
..link-styles .visited,
a:visited {
color: #475CBF;
}
..link-styles .focus,
a:focus {
color: #47BF63;
}
..link-styles .hover,
a:hover {
color: #FF0000;
}
..link-styles .active,
a:active {
color: #BEBF47;
}
</style>
</head>
<body>
<h1>Link types and the :hover pseudo class selectors</h1>
<ul class="link-styles" style="float: left;" >
<li class="link" >a:link</li>
<li class="visited" >a:visited</li>
<li class="focus" >a:focus</li>
<li class="hover" >a:hover</li>
<li class="active" >a:active</li>
</ul>
<ul >
<li><a href="#" >A link</a></li>
<li><a href="#foo" target="_blank" >A link (targetted)</a></li>
<li><a href="http://www.google.com" >A link (visited)</a></li>
<li><a href="http://example.org/404" >A link (unvisited)</a></li>
</ul>
<p style="clear: both;" ><a
href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes"
>CSS specification</a>
<br><tt>http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes</tt></p>
</body>
Navigation:
[Reply to this message]
|