我有一个像这样的导航元素......
<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 来说还是很新,所以非常感谢任何帮助!)
Thanks!
您想要设置的颜色icon
悬停中的类a
元素。
.options-list li a:hover .icon {color: #ae0000;}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)