我刚刚开始使用FontAwesome,到目前为止一直很好。但是有一个问题,当我使用锚标签并且它有text-decoration:none
时,以及悬停text-decoration:underline
。当我悬停链接时,图标也会获得下划线效果...我如何只获得带下划线的链接,而不是图标?
我试图将它放在锚标记之外,但它没有得到我分配给链接的颜色
示例代码:
<style>
a{color:red;text-decoration:none;}
a:hover{text-decoration:underline;}
</style>
<a href="#"><span class="fa fa-camera-retro"> </span>This's a test</a>
谢谢
我将你的确切代码弹出到JSFiddle中,注意到相机图标本身没有完全加下划线,但是图标和文本之间的空间是。
所以,如果这是你正在经历的,你可以在图标后添加一些填充,这样就没有空格加下划线。
a {
color: red;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.fa {
padding-right: 5px;
}
a:hover .fa {
color: blue;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<a href="#"><span class="fa fa-camera-retro"></span>This is a test</a>
CSS中的最后一项仅仅是为了显示在悬停时没有发生下划线效果,方法是更改图标的颜色以显示未从其他项目应用格式。请注意,在span
标记之后没有空格,而是通过应用于.fa
类的任何内容的5px填充创建空间。
我在最新版本的Firefox和IE9中测试了这个,因为那些是我工作机器上的内容。
我有类似的问题,发现fa
类定义了inline-block
显示模式。如果我强迫display
到链接中的inline
,那么一切都很好。
a > .fa {
display: inline;
}
把你的<span>
放在<a>
之外,这样它就不会受到你的悬停的影响......
<span class="fa fa-camera-retro"></span><a href="#">This is a test</a>
您可以为a:hover span.fa
选择器添加样式:
<style>
a {
color: red;
text-decoration: none;
}
a:hover span.fa {
text-decoration: none;
}
</style>
<a href="#"><span class="fa fa-camera-retro"></span> This is a test</a>