CODEWITHSUNDEEP
csscss-selectors
Jim
Jim

Reputation: 851

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

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?

Upvotes: 1

Views: 3245

Answers (4)

wsmart135
wsmart135

Reputation: 1

Try this: 

a:hover {
 /*link style goes here*/
}

Select all images with links when hovered and set another style.

a:link:hover img {
    /* hovered, linked image styles */
}

This will select only images that have links and are hovered over.

Works in Weebly as well.

Upvotes: -1

Sean
Sean

Reputation: 4470

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.

Upvotes: 4

Scott Cranfill
Scott Cranfill

Reputation: 1054

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 */
}

Upvotes: 2

msp
msp

Reputation: 139

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

Upvotes: 2

Related Questions