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的单独CSS：悬停，它会独立于文本更改悬停颜色。我也尝试过包含i和i：在a之后将鼠标悬停在下面的css中，但这会完全打破这种效果。

如何在文本同时悬停时更改颜色图标？

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>

Font-awesome图标与文本分开

1 个答案: