刪除帶有下劃線：懸停：以前

「使用的字體創建在下面的例子爲我的導航圖標：開始 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

刪除帶有下劃線：懸停：以前

回答

相關問題