CSS，改变一个链接

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> 

我使用的字体真棒生成的图标。 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还是相当新的，所以任何帮助mucho赞赏！）

谢谢！

Answer 1

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

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