我正在使用很棒的字体图标来伴随导航栏中的列表项，如下所示:
<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 并且独立于文本更改悬停颜色。我也试过在 a 之后在下面的 css 中包含 i 和 i:hover，但这完全破坏了效果。
如何让图标在悬停时与文本同时改变颜色？
最佳答案
<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>
关于html - Font Awesome 图标悬停在文本之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33185414/