字体真棒图标悬停在文本之外答案

【问题标题】：Font-awesome icon hovers separate to text字体真棒图标悬停在文本之外
【发布时间】：2015-10-17 18:38:01
【问题描述】：

我正在使用很棒的字体图标来伴随导航栏中的列表项，如下所示：

                    <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 ，但这完全破坏了效果。

如何让图标在悬停时与文本同时改变颜色？

【问题讨论】：

请提供jsfiddle。
它正在用文字改变颜色jsfiddle.net/sandenay/krahhxwp/1
是的......它在没有 .navbar .navbar-nav 类的情况下工作......也许你的类有问题 - jsfiddle.net/216n0gxs/5

标签： html css twitter-bootstrap font-awesome

【解决方案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>

【讨论】：

只使用简单的类