Question

When I mouse over linked images I see hover background color beneath the image. How to avoid this?

Is there any solution that would not involve applying special class to a elements (like a.nobackground:hover)?

CSS:

a:hover, a:focus {
    background-color: rgb(240,39,96);
    cursor: pointer;    
}

HTML:

<a href="#" title=""><img src="with_transparency.png" alt=""/></a>

edit:
setting img background to none doesn’t work

a img {
    background: none !important;
}

setting img background to any other color would do the job if there’s no non-solid color (or graphic) beneath the image (in this case .png)

a img {
    background: #000 !important;
}

Answer 1

Does setting the background color of the images do what you want?

a img {
    background: none;
}

Depending on your stylesheets, you might need the !important bang in front of “none” to overwrite other conditions.

Edit: On second thought, you might want to explicitly set a color value instead of simply saying “none.”

Another edit: True, if the color or background behind the transparent PNG wasn’t a solid color, you’ll encounter some issues. One alternative is this:

<a href="#" class="transparent_png"></a>

And the CSS:

.transparent_png {
    background-image: url('with_transparency.png');
    background-color: transparent;
    display: inline-block;
    width: ??px;
    height: ??px;
}

So here, you’re not actually using an image tag, but can overwrite the background-color property that’s normally applied on a:hover and a:active. Does this work?