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:
Now, my css classes in my css file are:
color: White ;
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?
It should be
It should be .MenuItems:hover. .MenuItems a:hover would refer to an anchor inside an element with a class of .MenuItems.
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.
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.
Hi, thanks for the replies.
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