如何反转过渡？

Question

我已经做了一个转换，以便在悬停时慢慢更改导航元素的背景。但是当我把鼠标放在元素上时，它会立即将它改变成我以前的样子。我希望这种改变像最初的过渡一样缓慢。

这里是HTML代码

<ul> 

    <a href="#"><li><i class="home primary-nav-element"></i></li></a><!-- 
    --><a href="#"><li><i class="upload primary-nav-element"></i></li></a><!-- 
    --><a href="#"><li><i class="favs primary-nav-element"></i></li></a><!-- 
    --><a href="#"><li><i class="search primary-nav-element"></i></li></a> 

</ul> 

这是当前CSS我：

.primary-nav li:hover .home { 
    background-position: 0 100%; 
    -webkit-transition: background 400ms; 
    -moz-transition: background 400ms; 
    -o-transition: background 400ms; 
    transition: background 400ms; 
} 

Answer 1

戴上.primary-nav li，而不是过渡：悬停psuedo元素。

.primary-nav li { 
    -webkit-transition: background 400ms; 
    -moz-transition: background 400ms; 
    -o-transition: background 400ms; 
    transition: background 400ms; 
} 

.primary-nav li:hover .home { 
    background-position: 0 100%; 
}