A:Hover for Classes

Cant get the background colour to change

[aspdaddy]

apologies if this has been answered already...
I cant get this style working:

A.menubar:hover {BACKGROUND-COLOR:#ffffaa;}

I am having to use javascript onmouseover/onmouseout and a function to get the result I need. I am using a different A:Hover rule as well, for the links in the main body, is this causing the problem?

aspdaddy

[Nick_W]

A.menubar:hover {BACKGROUND-COLOR:#ffffaa;}

.menubar a:hover {
background-color: #FFFFAA;
}

Nick

[fluxcapacitor]

Aren't they different things?

That is, aspdaddy wants to apply the background-color only to the menubar class for the A tag when the mouse is hovering over the link.

The .menubar a:hover causes the background-color to apply to all .menubar classes as well as all instances of the A tag when the mouse is hovering over it.

[stever]

I think they are different things - but not in the way you put it:

A.menubar:hover {BACKGROUND-COLOR:#ffffaa;} says that the a:hover part of the .menubar class gets a light yellow bg colour (as opposed to the normal .menubar bg)

.menubar a:hover {
background-color: #FFFFAA;
} says that the a:hover takes a light yellow bg colour when it is part of .menubar (as opposed to the normal a:hover bg)

Possibly...

[Birdman]

I believe Nick's solution is correct. It's called a pseudo-class, I believe. I've just been toying with that technique recently.

Aspdaddy, also make sure a:hover is listed after a:visited if you even use a:visited. I know that is rudimentary, but I've made the same mistake and read about many others that have done so.

[stever]

The following css should show the difference between the two:

a {
background-color : #ffccaa;
}
a.menubar:hover {
background-color: #ffffaa;
}
.menubar {
background-color: #cccccc;
}
.menubar a:hover {
background-color: #ffffaa;
}

[moonbiter]

Try:

a:hover.menubar {
background: yellow;
}

Although in my quick tests

a.menubar:hover

works just as well (tested in IE 6, Mozilla 1.1, Opera 6). Is it 5.5 that this is not working in?

Just to clear things up,

.menubar a:hover

is an example of a decendant selector [w3.org]. The

a:hover

is a dynamic psuedo-class [w3.org]. Per the specification, the original poster's declaration should work, but may not due to poor browser support. Nick_W's selector example seems to be better supported, but is not really any more "correct."

[edited by: moonbiter at 1:57 pm (utc) on Oct. 15, 2002]

[starway]

Both ways are acceptable. It depends on how do you implement them:

A.menubar:hover { }
is for
<a class=manubar>link</a>

and

.menubar a:hover { }
is for
<p class=menubar><a>link</a></p>

You should always specify how do you use the styles in your html in order to avoid misunderstanding.

[stever]

Oh, we can dance on the heads of a lot of pins here....;)

But surely they are different things and we are dealing with the cascade in cascading style sheets here. Yes, they both give a yellow bg to the hover, but the difference is in the parent, which defines the original A.

Looking at the example in my post above, one gives a grey A background and one gives an orange A background. So in one the :hover is referring to the parent A element and in the other it is referring to the .menubar class.

Why does this matter? Because it saves on coding CSS - you only change the things you need to change and let the parent dictate as much as possible. (For example, not specifying the font in every declaration...)

[moonbiter]

Well, there is no need to specify the font in every declaration (since you could do it on the body), but you're right. The original poster should review what he is doing and use the right declaration for the job at hand. It mostly depends on how s/he has his or her page structured.

[MikeG]

Do you mean like this: <sorry, no URLs> (Left-side navigation)

Generally, I start by setting 2 Nav styles (an 'on' & an 'off' -- just like for an image mouseover).

For .NAVoff set up the font, background, colors, etc. Also setup the subclass for a:link & a:visited with the same parameters (the exception is if you use a border; don't set up these vars in the a:link/a:visited styles)

Then create an on state called .NAVon with the changes you want in your mouseover.

Then in your <TD> define your initial bgcolor and your mouseovers:

<td class="NAVopen" onMouseOut="NewStyle(this,'NAVopen')" onMouseOver="NewStyle(this,'NAVover')"><a href="link.html">Doc link</a></td>

The script to make this function is:

<script language="JavaScript">
<!--
function NewStyle(obj, new_style) {
obj.className=new_style;
}
//-->
</script>

[edited by: tedster at 11:30 pm (utc) on Nov. 6, 2002]