How to change background-color on text links on hover but not image links

Question

I have a CSS rule like this:

a:hover { background-color: #fff; }

But this results in a bad-looking gap at the bottom on image links, and wh

Answer 1

The following should work (untested):

First you

 a:hover { background-color: #fff; }

Then you

a:imagelink:hover { background-color: inherit; }

The second rule will override the first for and preserve the background color of the parent.

I tried to do this without the class="", but I can't find a CSS selector that is the opposite of foo > bar, which styles a bar when it is the child of a foo. You would want to style the foo when it has a child of class bar. You can do that and even fancier things with jQuery, but that may not be desirable as a general technique.