• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 636
  • Last Modified:

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> ?

0
Brian Withun
Asked:
Brian Withun
  • 2
2 Solutions
 
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
 
icy118Commented:
Oh, or you could apply ANOTHER background color to the images like this:

#iMenuWrap A:hover img{
    background-color: #FFFFFF;
}
0
 
sscottiCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now