Question

我有一个像这样的导航元素......

<ul class="options-list">
    <li><a href="#"><i class="icon icon-print"></i> Print This</a></li>
    <li><a href="#"><i class="icon icon-envelope-alt"></i> Send This</a></li>
    <li><a href="#"><i class="icon icon-bookmark"></i> Bookmark This</a></li>
    <li><a href="#"><i class="icon icon-star"></i> Favourite This</a></li>
    <li><a href="#"><i class="icon icon-heart"></i> Like This</a></li>
</ul>

我正在使用Font Awesome生成图标。 CSS如下：

.options-list li a {
  color: #888;
  display: block;
  border-bottom: 1px solid #e7e7e7;
  padding-top: 7px;
  padding-right: 0;
  padding-bottom: 7px;}

.options-list li:first-child a {margin: -15px 0 0 0;}
.options-list li:last-child a {border: none;}
.options-list li a:hover {color: #444;}

显然，这会让我在悬停到＃444时更改文字（和图标）颜色。现在我想做的是保持这一点，但是在悬停时图标会改变为不同的颜色。（即文本更改为＃444，图标在悬停时更改为＃AE0000）

我不确定解决问题的最佳方法。（对于CCS / HTML来说还是一个新手，所以任何帮助都很受欢迎！）

谢谢！

Answer 1

您想要设置位于悬停的icon元素内的a类的颜色。

.options-list li a:hover .icon {color: #ae0000;}

CSS，改变链接中图标字体的悬停效果

1 个答案: