Hover Inheritance

[keyplyr]

hover is not being inherited for links in .nav class. For several reasons, I cannot split my .nav properties between a link and non-link version. Is the another way to get links to hover as #600? Thanks.

a:link {
background:transparent;
color:#000;
text-decoration:none;
}
a:visited {
background:transparent;
color:#000;
text-decoration:none;
}
a:hover {
background:transparent;
color:#600;
text-decoration:underline;
}
.nav a, .nav a:hover, .nav a:visited {
background:#699 url(http://my-domain.com/images/bg.jpg);
color:#000;
font:bold 11px/12px verdana,arial,sans-serif;
text-align:center;
text-decoration:none;
display:block;
padding:6px;
}

[BlobFisk]

Hey keyplyr,

How is this working in your HTML?

Are you using <a class="nav"...>? Or is the anchor in a container that has a class of nav? EG: <div class="nav">..<a href=...></div>?

If it is the former, then you CSS should be:

a.nav, a.nav:hover, a.nav:visited {

HTH

[SuzyUK]

hi keyplyr

.nav a, .nav a:hover, .nav a:visited

You don't need a:hover and a:visited in the above rule (they're in the wrong order any way but) they're not actually doing anything as .nav a takes care of all states of a link

and it's .nav a that is overriding all your previous (non .nav) link states as it's more specific with the .nav selector and a is overruling a:link, a:hover and a:visited as it's further down the cascade

so:

/* set all properties on all link states within .nav */
.nav a {
background:#699 url(http://my-domain.com/images/bg.jpg);
color:#000;
font:bold 11px/12px verdana,arial,sans-serif;
text-align:center;
text-decoration:none;
display:block;
padding:6px;
}

/* then specify any hover differences required */
.nav a:hover {color: #600;}

Suzy

[keyplyr]

You don't need a:hover and a:visited in the above rule (they're in the wrong order any way but) they're not actually doing anything as .nav a takes care of all states of a link

Yes they are necessary. The nav class is a left-hand navigation table cell. It's set-up that way to only have the Background image display behind the 20 text, and one image link (not the remainder of the cell.)

I tested, and if the hover and visited are not present, the BG dissapears when the links are hovered or when the user returns to the page after visiting one of the links.

I just wish to know how to have the links change to #600 when the cursor hovers over them.

<added> Thanks SuzyUK, just adding:

.nav a:hover {
color: #600;
}

restored the hover color. Thank you.

[SuzyUK]

I just wish to know how to have the links change to #600 when the cursor hovers over them.

the last bit of CSS should be doing that (well it is for me), add that to your original code

.....I'm not quite sure what you're trying to describe with this background image, but the I have to respectfully disagree that the extra a:visited and a:hover are not required with respect to the effect they're having on the link ;)

I think the confusion here is what the background image is actually doing. (perhaps the positioning of it somehow?)

Is it a small background image like a bullet that is present in each individual link or is it more like a tall background to the entire (well half) height of the table cell

I've tested my code with a single line height image.
The image remains static and the hover color changes

Suzy