CODEWITHSUNDEEP
csspseudo-class
Ramon Vasconcelos
Ramon Vasconcelos

Reputation: 945

How to change background-position of a :after element when user hovers an anchor

I have an anchor and I'm using a pseudo class :after for icons images. I want to change background position of :after when user hovers the element.

I know I can do it using javascript, but I'm trying to figure out a CSS solution, I don't even know if it's possible.

html:

<a href="" class="foo">

I've tried to do something like this, but obviously it didn't work: css:

.foo{background:top;}
.foo:hover .foo:after{background-position:bottom;}

Some help would be appreciated

Upvotes: 2

Views: 613

Answers (1)

apaul
apaul

Reputation: 16170

You just need to change your selector:

Working Example

.foo::after {
    content:'';
    position: absolute;
    background:url('http://placekitten.com/g/200/300');
    height:100px;
    width:100px;
    transition: all .3s;
}
.foo:hover::after { /* this part */
    background-position:50%;
    transition: all .3s;
}

Upvotes: 1

Related Questions