CSS,改变链接中的图标字体的悬停效果 [英] CSS, changing hover effect of icon font in a link
本文介绍了CSS,改变链接中的图标字体的悬停效果的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个nav元素像这样...
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>
我使用Font Awesome生成图标。 CSS如下:
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;}
显然,这给了我一个文本(和图标)颜色更改悬停到#444。现在我想做的,是保持,但有图标变成不同的颜色悬停。 (即文字变更为#444,图示在悬停时变更为#AE0000)
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!)
谢谢!
推荐答案
您想要设置悬浮在元素
内的图标
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;}
这篇关于CSS,改变链接中的图标字体的悬停效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文