3 replies [Last post]
richiej
Offline
newbie
Last seen: 15 years 7 weeks ago
Joined: 2007-10-15
Posts: 2
Points: 0

Hi,

I have a really strange problem with my css. I have a menu in my web app which is made up by basic "anchor" elements. An example of the rendered html for a one of these is:

Home Page

Now, my css classes in my css file are:

.MenuItems
{
color: White ;
font-weight:bold;
}

.MenuItems a:hover
{
text-decoration: underline;
}

Initially, the menu appears fine. The wording is in white and bold. However, when I hover over the anchor, the text does not become underlined as I would expect and the cursor almost appears to disappear. The cursor does changes to become one resembling the cursor you get when you are hovering over a text area. I have tried adding a cursor part to fix this but the nothing happens. It is as if the "a:hover" css class of the "MenuItems" is not recognised.

The classes are at the end of my file so nothing is overriding it. Can anyone see where I have gone wrong?

many thanks

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It should be

It should be .MenuItems:hover. .MenuItems a:hover would refer to an anchor inside an element with a class of .MenuItems.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

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

I have added code tags to

I have added code tags to your code snippet to render it. Please read the forum stickies regarding requirements for code we normally need to see far more than you have shown.

Out of interest how are your links working with javascript turned off?

You have written the anchor ruleset incorrectly, falling into a common trap your class 'MenuItems ' is a class belonging to the anchor your rules however set the a:hover as a nested element of a class called 'MenuItems ' i.e as a descendant selector it ought to be a.MenuItems:hover.

text-decoration:underline is the default for :hover so you shouldn't need to state it.

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

richiej
Offline
newbie
Last seen: 15 years 7 weeks ago
Joined: 2007-10-15
Posts: 2
Points: 0

Hi, thanks for the replies.

Hi,

thanks for the replies. I have tried it both as .MenuItems:hover and .MenuItems a:hover and neither work. Also, i have javascript turned on so my links should work.

I believe I have cracked some of it. As soon as I moved the event from "onclick" to "href", the cursor problem disappeared and using "a.menuitems:hover" fixed the hover problem.

Thanks very much for your help