通过:hover:before去除下划线

Question

通过:hover:before去除下划线

5

我使用字体来创建导航图标，以下是示例链接: 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;}

非常感谢。

- David Allen

我想要去掉所有图标的下划线，而不仅仅是活动状态的图标。我将删除“.active”类以避免混淆。 - David Allen

你使用了哪些CSS？（不仅仅是那些不起作用的CSS，而是整个列表的CSS。） - David Thomas

一个有趣的问题！我做了一个简化版的fiddle：http://jsfiddle.net/NGHpg/ - Linus Caldwell

3个回答

2

另一种方法是用一个元素（例如span）包装链接的文本，去掉'a'的下划线并在悬停时应用于span。

<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; }

- Lafinboy

0

恐怕那样做不起作用。我建议给该类别您的<li/>, 并为其设置:before。

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

- Linus Caldwell

是的，这就是你的代码片段告诉我的 :( - David Allen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Thomas · Accepted Answer

截至目前，我所发现的唯一消除生成内容（通常）继承样式的方法是给它设置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演示。

当然，这种方法的缺点是需要为生成的内容（以及父级元素的margin）分配显式的width

。