Using the After and Hover together in CSS

Question

In order to show links that go to an external page, I have a little gif that goes after the text, using the after property of css.

.[style]:after{content:url(../images/main/externallink.gif)}

The problem is when it comes to making the image change (to change the colour) on roll-over; the following code works fine but adds the image to the first one instead of changing it!

.[style] a:hover:after{content:url(../images/main/externallinkover.gif)}

Can anyone suggest a way to make the original 'after' image disappear, or suggest a completely different way of doing this?

In one statement you have .[style]:after and in the second you have .[style] a:hover:after. They are not following the same structure and so will not match the same element in two different states. — Brendan Bullen
– Brendan Bullen, Commented Jul 8, 2013 at 13:35

Paul D. Waite · Accepted Answer · 2013-07-09 10:56:33Z

4

You're applying the hover image to a different element than the initial image.

If you apply both images to the link, you should get the behaviour you want:

.[style] a:after{content:url(../images/main/externallink.gif)}

.[style] a:hover:after{content:url(../images/main/externallinkover.gif)}

(Query: I take it .[style] isn't the actual selector you're using?)

edited Jul 9, 2013 at 10:56

answered Jul 8, 2013 at 13:35

Paul D. Waite

99.5k57 gold badges204 silver badges275 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matt Bowyer Over a year ago

Great - that's worked perfectly, thanks. (And no, I wasn't actually calling my style '[style]'!)

Paul D. Waite Over a year ago

@MattBowyer: hurray! Sure - [style] is a bit of a confusing way to write it, because it's actually a CSS selector (specifically, the attribute selector).

Collectives™ on Stack Overflow

Using the After and Hover together in CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related