删除下划线:悬停:之前

时间:2013-03-24 22:46:40

标签: css html5

使用字体为我的导航创建图标,如下例所示: http://www.blackcountrydesigns.co.uk/examples/green/

我遇到的问题是,当您将鼠标悬停在某个链接上时,会在链接和图标上显示下划线。

我想知道如何删除图标上的下划线,但将其保留在链接上。

这是我的代码:

HTML
<ul class="hidden-phone">
         <li><a class="entypo-home" href="#">Home</a></li>
         <li><a class="entypo-briefcase" href="#">Services</a></li>
         <li><a class="entypo-picture" href="#">Portfolio</a></li>
         <li><a class="entypo-address" href="#">Contact</a></li>
</ul>

CSS
#nav ul li a {color:#ccc; margin-left: 25px;}
#nav [class*='entypo-'].active:before {color:#666;}
#nav [class*='entypo-']:before {font-size: 46px; position: relative; top: 5px;left: -3px; color:#999;}
[class*='entypo-']:hover:before {text-decoration:none !important;}

非常感谢

3 个答案:

答案 0 :(得分:9)

我发现,从生成的内容中删除(通常)继承的样式的唯一方法是使用简化的演示(来自注释)给它position: absolute

a:link
{
    text-decoration: none;
    position: relative;
    margin-left: 1em;
}

a:hover
{
    text-decoration: underline;
}

a:before
{
    content: '#';
    position: absolute;
    right: 100%;
    top: 0;
    bottom: 0;
    width: 1em;
}

JS Fiddle demo

当然,这种方法的缺点是要求将明确的width分配给生成的内容(以及父margin元素的a )。

答案 1 :(得分:1)

另一种方法是将链接的文本包装在一个元素中,例如span,从'a'中删除下划线并将其应用于悬停时的跨度。

<li><a class="entypo-home active" href="#"><span>Home</span></a></li>

[class*='entypo-'] a { text-decoration: none; }
[class*='entypo-'] a:hover span { text-decoration: underline; }

答案 2 :(得分:0)

我担心这不起作用。我建议您为课程提供<li/>并为其设置:before

如果您不想使用position: absolute方法,请参阅我的fiddle建议。