CSS, changing hover effect of icon font in a link

问题:

I have a nav element like so...

<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>

I am using Font Awesome to generate the icons. The CSS is as follows:

.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;}

Obviously this gives me a change of text (and icon) colour on hover to #444. Now what I would like to do, is keep that, but have the icon change to a different colour on hover. (i.e text changes to #444, icons changes to #AE0000 on hover)

I'm not sure of the best way to tackle it. (Still quite new to CCS/HTML so any help mucho appreciated!)

Thanks!

回答1:

You want to set the color of the icon class that is inside a hovered a element.

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