homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

A:Hover for Classes
Cant get the background colour to change

 8:57 am on Oct 15, 2002 (gmt 0)

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?




 9:21 am on Oct 15, 2002 (gmt 0)

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

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



 12:30 pm on Oct 15, 2002 (gmt 0)

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.


 1:38 pm on Oct 15, 2002 (gmt 0)

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)



 1:44 pm on Oct 15, 2002 (gmt 0)

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.


 1:53 pm on Oct 15, 2002 (gmt 0)

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;


 1:56 pm on Oct 15, 2002 (gmt 0)


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]


 1:56 pm on Oct 15, 2002 (gmt 0)

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

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


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


 2:05 pm on Oct 15, 2002 (gmt 0)

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


 2:10 pm on Oct 15, 2002 (gmt 0)

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.


 10:12 pm on Nov 6, 2002 (gmt 0)

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) {

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved