How can I set specific CSS classes for links which are images?

Question

This seems painfully simple, but I can't work out how to do it:

I want every link on my site to have a specific style on mouseover, so I use

a:hover { //style goes here }

The thing is, I don't want that style applied to links that are images, but

a:hover img { //reset style }

doesn't work. What should I try instead?

Answer 1

For links that are images, use a different css class instead of referencing all anchor tags.

Answer 2

The only way to do it is to put a class on the as that enclose imgs, like so:

<a href="link.htm" class="imagelink"><img src="image.jpg" alt="Image" /></a>

And then select it in CSS with

a.imagelink:hover {
    /* styles */
}

Answer 3

Your attempt is restyling the image element, not the a element, which is why it doesn't work (see here for an explanation of CSS selector syntax). Unfortunately, there is no syntax for selecting the parent of an element, so as others have said, you will have to create a special class for image links.