如何反轉過渡？

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