css - 如何更改 :after element when user hovers an anchor 的背景位置

Question

我有一个 anchor ，我正在为图标图像使用伪类 :after。我想在用户悬停元素时更改 :after 的背景位置。

我知道我可以使用 javascript 来完成，但我正在尝试找出一个 CSS 解决方案，我什至不知道它是否可行。

html:

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

我试过这样做，但显然没有成功:CSS:

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

一些帮助将不胜感激

Answer 1

你只需要改变你的选择器:

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;
}