CODEWITHSUNDEEP
css
Matt Bowyer
Matt Bowyer

Reputation: 215

Using the After and Hover together in CSS

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?

Upvotes: 3

Views: 216

Answers (1)

Paul D. Waite
Paul D. Waite

Reputation: 98786

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?)

Upvotes: 4

Related Questions