Fri, 2004-09-10 17:23
I have two sets of links(A and A.grayfooterlink). The normal links I want to be gray(on a dark background) and the grayfooterlink links I want to be dark blue(on a light gray background). I want both links to HOVER a different color. The normal links work like I expect them to, but the grayfooterlinks work initially but then do not hover to the other color once they have been visited to.
I have the following CSS styles defined in my css file. I apologize for not condensing them, but I figured it was easier to read this way.
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #CCCCCC;
text-decoration: none;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #CCCCCC;
text-decoration: none;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #CCCCCC;
text-decoration: none;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #999999;
text-decoration: none;
}
a.grayfooterlink:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #CCCCCC;
text-decoration: underline;
}
a.grayfooterlink:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #000066;
text-decoration: none;
}
a.grayfooterlink:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #000066;
text-decoration: none;
}
a.grayfooterlink:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #000066;
text-decoration: none;
}
Sample Links:
--------------------------------
<a href="../updates.html">Software Updates</a>
<a href="downloads.html" class="grayfooterlink">Downloads</a>
Fri, 2004-09-10 18:19
#1
Problem with CSS A tag after they have been visited to
comment out the a.grayfooterlink:active
see what happens??
Fri, 2004-09-10 22:58
#2
Problem with CSS A tag after they have been visited to
I tried removing this which didn't change anything:
a.grayfooterlink:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #000066;
text-decoration: none;
}
Sat, 2004-09-11 01:29
#3
Problem with CSS A tag after they have been visited to
Hi loxer420,
For the pseudo classes to work correctly they need to be in the correct order.
Link
Visited
Hover
Active
Some one here once mentioned LoVe HAte as an easy way to remember the order. Sorry I remembered the saying just not who wrote it :roll:
Think about the css parser going down the list and matching the state of the link with each of the pseudo classes.
Firstly the all links would match the "link" pseudo class so would get the styles from that.
Then the parser goes to the next style and checks for a match.
Lets say visited matches the state of the link (it's been visited) so the styles within the visited pseudo class would be applied over the link styles.
Then if the mouse is over the link and the hover pseudo class is next in line for parsing the hover styles are applied.
Lastly active is applied when the link is actually being clicked (the mouse button is down).
If visited styles were last for example, then they would be applied over the other styles.
Hope that helps
Fri, 2004-11-26 12:53
#4
Keep link active state alive ?
Hi,
I am new here and have a first question.
Quote:
Lastly active is applied when the link is actually being clicked (the mouse button is down).
Is it possible to keep the "active" state alive ?
I use an overline attribute as active state in my menu and I am looking for a solution to keep the overline on the menu link as long as it is active (not only on mouse button down).
Thanks.
Regards,
TonyS
Fri, 2004-11-26 14:35
#5
Problem with CSS A tag after they have been visited to
Do you mean that when you are on a page you want it's link to be in someway different to all the others?
If so as far as I know you have to attach a class to the "active" link
say
<a href="../updates.html">Software Updates</a> <a href="downloads.html" class="grayfooterlink current">Downloads</a>
and
a.current:link, a.current:visited, a.current:hover, a.current:focus, a.current:active
{
color: indianred
}
On another note to add to Tony's post I like to remember
Lord Vaders Handle Formely Anakin
For the order of link visited hover focus active, although I have no idea where I read it..
Fri, 2004-11-26 23:39
#6
Problem with CSS A tag after they have been visited to
Is the order really that hard to remember :roll: 
I thought that we were all meant to be brainy types.
Sat, 2004-11-27 12:12
#7
Problem with CSS A tag after they have been visited to
No problemo with the order 
:idea: Looking for a css alternative for a classic "button down" state.
Regards,
TonyS
Sat, 2004-11-27 12:30
#8
Problem with CSS A tag after they have been visited to
Guess I found something here : http://www.siteexperts.com/tips/contents/ts07/page1.asp
I'll check it asap. Actually I was looking for a css only solution,... .
:idea: If I add a new class "current" to the menu link... only on the viewed page... Yes got it css only !!!
Regards,
TonyS