8 replies [Last post]
loxer420
Offline
newbie
Last seen: 17 years 12 weeks ago
Joined: 2004-09-10
Posts: 2
Points: 0

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>

Danny
Offline
Regular
Last seen: 17 years 12 weeks ago
Joined: 2004-09-09
Posts: 13
Points: 0

Problem with CSS A tag after they have been visited to

comment out the a.grayfooterlink:active

see what happens??

loxer420
Offline
newbie
Last seen: 17 years 12 weeks ago
Joined: 2004-09-10
Posts: 2
Points: 0

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;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 17 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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

TonyS
Offline
newbie
Last seen: 17 years 1 week ago
Joined: 2004-11-26
Posts: 3
Points: 0

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

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem with CSS A tag after they have been visited to

Is the order really that hard to remember :roll: Smile I thought that we were all meant to be brainy types.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

TonyS
Offline
newbie
Last seen: 17 years 1 week ago
Joined: 2004-11-26
Posts: 3
Points: 0

Problem with CSS A tag after they have been visited to

No problemo with the order Laughing out loud

:idea: Looking for a css alternative for a classic "button down" state.

Regards,

TonyS

TonyS
Offline
newbie
Last seen: 17 years 1 week ago
Joined: 2004-11-26
Posts: 3
Points: 0

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