?
Solved

Need CSS to override hover effects on images

Posted on 2009-05-11
4
Medium Priority
?
624 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
[X]
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
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

Setting up LaraDock for Laravel

Learn how to set up LaraDock in a Laravel project - LaraDock gives us an easy way to run a Laravel application using Docker in a single command.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

777 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