a:hover not overriding parent class

Question

I have an aspx page with a Masterpage containing a panel with a CssClass of "menutoolbar". Within that panel I am placing objects, in this case a linkbutton with a class of "SearchLink".

In my Stylesheet, I am defining

.menutoolbar a:hover { color: red }

.Searchlink a:hover { color: yellow }

When I hover over the Searchlink link it is red! This is not what I expect, the Searchlink specifically is defined as yellow, it looks like the parent container "menutoolbar" is overriding the color, reverse of what I would expect.

How can I make the hover effect yellow for Searchlink?

Answer 1

try doing:

.Searchlink a:hover { color: yellow!important; }

if the link class is "searchlink" you could try

a.Searchlink:hover { color: yellow; }

Answer 2

a.Searchlink:hover { color: yellow }

Answer 3

Alternatively you can be more specific with the rule, e.g.

a.Searchlink:hover { color: yellow;}

Or something like that.