Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Need CSS to override hover effects on images

Posted on 2009-05-11
4
Medium Priority
?
634 Views
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> ?

0
Comment
Question by:Brian Withun
  • 2
4 Comments
 
LVL 2

Expert Comment

by:icy118
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.
0
 
LVL 2

Accepted Solution

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

#iMenuWrap A:hover img{
    background-color: #FFFFFF;
}
0
 
LVL 5

Assisted Solution

by:sscotti
sscotti earned 320 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 {
    background:none;
    color: #00F;
    text-decoration: none;
}
</style>

and tag the <a> tag wrapping the image with "noback".
0
 
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.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Ready to get certified? Check out some courses that help you prepare for third-party exams.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

782 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