真棒字体图标悬停在文本上

Question

I'm using font awesome icons to accompany list items in a navigation bar like so: 我正在使用超酷的字体图标来伴随导航栏中的列表项，如下所示：

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

CSS: 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've tried a few things such as making a separate CSS only containing i and i:hover and that changes the hover colour independently of the text. 我尝试了一些操作，例如制作仅包含i和i：hover的单独CSS，并且独立于文本更改了悬停颜色。 I've also tried include i and i:hover in the css below after a but that breaks the effect altogether. 我也尝试过在a之后在下面的CSS中包含i和i：hover，但这完全破坏了效果。

How can I get the icon to change color on hover at the same time as the text? 如何获得与文字同时在悬停时更改颜色的图标？

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