删除带有下划线：悬停：以前

“使用的字体创建在下面的例子为我的导航图标：开始 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;}

非常感谢

来源

2013-03-24 David Allen

我该如何删除所有图标的下划线，而不仅仅是活动的图标。我将删除.active类以避免混淆 – 2013-03-24 22:54:31

您正在使用哪些CSS？（不仅仅是不工作的CSS，而是整个列表的CSS。） – 2013-03-24 22:55:36

+1一个有趣的问题！我做了一个简单的小提琴：http://jsfiddle.net/NGHpg/ – 2013-03-24 22:57:42

我发现，到目前为止，还删除（正常）继承的样式从生成的内容是给它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分配给生成的内容（以及父母a元素的margin）。

来源

2013-03-24 23:01:25

这看起来是做我想做的。但是我对宽度感到困惑：1em，因为它仍然没有。 – 2013-03-24 23:05:50

只有宽度是必要的，因为生成的内容显式地位于其父元素之外;这是为了确保它不被覆盖，或覆盖另一个元素。 – 2013-03-24 23:06:50

+1不知道这个把戏。冷静的工作，大卫！ – 2013-03-24 23:07:24

恐怕不起作用。我建议给这个班级你的<li/>，并设置:before。

如果你不想使用position: absolute的方法，这里是我的建议fiddle。

来源

2013-03-24 23:02:01

是的，这是你的小提琴告诉我:( – 2013-03-24 23:02:43

不，我错了，请参阅大卫托马斯的解决方案！ – 2013-03-24 23:03:05

另一种方法是将链接的文本包装在一个元素中，例如，从“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; }

来源

2013-03-24 23:06:27 Lafinboy

删除带有下划线：悬停：以前

回答

相关问题