3

私はそのようなナビゲーション要素を持っています...

<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 はまだかなり新しいので、どんな助けも大歓迎です!)

ありがとう！

4

1 に答える 1

16

ホバーされた要素icon内にあるクラスの色を設定したいとします。a

.options-list li a:hover .icon {color: #ae0000;}
于 2012-11-13T01:04:50.000 に答える