如何在用户悬停锚点时更改a：after元素的背景位置

Question

我有一个锚点，我正在使用伪类: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;
}