Need CSS to override hover effects on images

Posted on 2009-05-11
Last Modified: 2013-12-25
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> ?

Question by:Brian Withun
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2

Expert Comment

ID: 24356599
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.

Accepted Solution

icy118 earned 170 total points
ID: 24356631
Oh, or you could apply ANOTHER background color to the images like this:

#iMenuWrap A:hover img{
    background-color: #FFFFFF;

Assisted Solution

sscotti earned 80 total points
ID: 24356712
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 {
    color: #00F;
    text-decoration: none;

and tag the <a> tag wrapping the image with "noback".
LVL 13

Author Closing Comment

by:Brian Withun
ID: 31580227
I had been hoping for an all-css solution, which was provided.  Both solutions worked well.  Thank you.

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to count occurrences of each item in an array.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question