Need CSS to override hover effects on images

I have this style:

#iMenuWrap A:hover {
    background: #C99;
    color: #00F;
    text-decoration: none;
}

The problem is that when I hover over images that are anchors, those images also get the background color applied.

What CSS can I add that will prevent the background color (background: #C99) from applying to <IMG> ?

LVL 13
Brian WithunAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
icy118Connect With a Mentor Commented:
Oh, or you could apply ANOTHER background color to the images like this:

#iMenuWrap A:hover img{
    background-color: #FFFFFF;
}
0
 
icy118Commented:
If the images are in links that match that selector, you have to change your HTML markup.

Your best bet is to add a class to those links, say, "imageLink", and do this:

#iMenuWrap A.imageLink:hover {
    background: none;
}

otherwise, you're out of options, if the image doesn't cover up the background.  You might want to use CSS background images instead, which can avoid the issue entirely.
0
 
sscottiConnect With a Mentor Commented:
If you are not generating the menus dynamically you could at a class:

<style type="text/css">
#iMenuWrap A:hover {
    background: #C99;
    color: #00F;
    text-decoration: none;
}
#iMenuWrap .noback:hover {
    background:none;
    color: #00F;
    text-decoration: none;
}
</style>

and tag the <a> tag wrapping the image with "noback".
0
 
Brian WithunAuthor Commented:
I had been hoping for an all-css solution, which was provided.  Both solutions worked well.  Thank you.
0
All Courses

From novice to tech pro — start learning today.