字體 - 真棒圖標徘徊單獨的文本

我使用的字體真棒圖標陪在導航欄列表中的項目，像這樣：字體 - 真棒圖標徘徊單獨的文本

    <li class="page-scroll"> 
        <a href="#"><i class="fa fa-clock-o"></i> Latest</a> 
       </li>

CSS：

.navbar .navbar-nav li a { 
    color:#f0f0f0; 
    -webkit-transition: all ease 1s; 
    -moz-transition: all ease 1s; 
    transition: all ease 1s; 
} 

.navbar .navbar-nav li a:hover { 
    color:#7dbd83; 
    -webkit-transition: all ease 1s; 
    -moz-transition: all ease 1s; 
    transition: all ease 1s; 
}

我已經嘗試了很少有東西，比如使一個單獨的CSS只包含i和i：hover，並且獨立於文本而改變懸停顏色。我也嘗試過，包括我和我：懸停在下面的CSS後，但完全打破了效果。

如何獲取圖標以便在文本同時懸停更改顏色？

來源

2015-10-17 user3574766

請提供jsfiddle。 – Alex

它正在改變顏色與文本http://jsfiddle.net/sandenay/krahhxwp/1/ –

雅...它的工作沒有.navbar .navbar-nav類...也許有一個問題，你的類 - http://jsfiddle.net/216n0gxs/5/ –

<html> 
<head> 
<script> 

</script> 
<style> 

.animate_it{ 
color:#f0f0f0; 
-webkit-transition: color 2s; 
-moz-transition: color 2s; 
transition:color 2s; 
    } 

    .animate_it:hover{ 
    color:#7dbd83; 
    -webkit-transition: color 2s; 
    -moz-transition: color 2s; 
    transition: color 2s; 
    } 
    </style> 
    </head> 
    <body> 
       <li class="page-scroll"> 
       <a href="#"><i class="animate_it" > Latest</i></a> 
       </li> 
    </body> 
    </html>

來源

2015-10-17 10:38:01

只是使用簡單的類 –

字體 - 真棒圖標徘徊單獨的文本

回答

相關問題