真棒字體圖標懸停在文本上

Question

我正在使用超酷的字體圖標來伴隨導航欄中的列表項，如下所示：

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

我嘗試了一些操作，例如制作僅包含i和i：hover的單獨CSS，並且獨立於文本更改了懸停顏色。 我也嘗試過在a之后在下面的CSS中包含i和i：hover，但這完全破壞了效果。

如何獲得與文字同時在懸停時更改顏色的圖標？

Answer 1

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

真棒字體圖標懸停在文本上

問題描述

1 個解決方案

解決方案1
0 2015-10-17 10:38:01

真棒字體圖標懸停在文本上

問題描述

1 個解決方案

解決方案1 0 2015-10-17 10:38:01

解決方案1
0 2015-10-17 10:38:01