如何從Bootstrap主題懸停時刪除導航下劃線？

我進入了CSS並刪除了所有的文字修飾：下劃線，但由於某種原因它仍然顯示出來。有人可以告訴我如何將鼠標懸停在導航欄上時刪除頂部導航下劃線？如何從Bootstrap主題懸停時刪除導航下劃線？

這裏是Oleose主題的鏈接。

http://www.scoopthemes.com/templates/Oleose/Freeze/

2015-05-19 Marcos Martinez

你可以用更具體的選擇器覆蓋它。你可以把你的HTML標記？ –

我嘗試添加內聯CSS樣式=「文字裝飾：無;」重寫它，但下劃線仍然顯示。這就是爲什麼我認爲主題可能是通過JavaScript進行文本修飾。您可以使用我在帖子中提供的鏈接下載主題html。 –

這是罪魁禍首。這是一個僞元素（：後），使鏈接下的下劃線。

header .navbar-default ul.navbar-nav li a:hover:after { 
    background: #ffffff; 
}

只要刪除此或設置爲透明的背景。甚至更好的刪除這一個。

header .navbar-default ul.navbar-nav li a:after{ 
    .... 
}

下面是爲下劃線所作的樣式。

來源

2015-05-19 17:54:42 TeeDeJee

這可能是我見過的最長的CSS選擇器。爲什麼他不能只添加修飾符類？ –

@amin這是一個選擇器，存在於他的CSS。這應該被刪除而不是覆蓋。 – TeeDeJee

@TeeDeJee謝謝！我刪除了兩種css樣式，下劃線現在不見了:) –

所以你明白那裏發生了什麼：你所指的「下劃線」在鏈接本身上被創建爲僞元素:after。如果你不把鼠標懸停在鏈接上，它就是在那裏，只是在那個狀態下它有一個透明的背景色，所以你看不到它。在:hover此僞元素的背景顏色更改爲#ffffff，因此該元素變得可見。這是以過渡方式完成的，所以它不會突然變化，而是輕微變化。

這是使得「強調」看得見的規則：

header .navbar-default ul.navbar-nav li a:hover:after { 
    background: #ffffff; 
}

如果將其更改爲

header .navbar-default ul.navbar-nav li a:hover:after { 
    background-color: transparent; 
}

它將停留無形也當:hover發生。你可以隨時去那裏並在必要時重新激活它！

來源

2015-05-19 18:09:35 connexo

哇！ @connexo非常了不起，非常感謝你的解釋。我沒有正確理解問題。我認爲懸停行動實際上產生了下劃線。 –

如果您的問題現在得到解答，您應該點擊您最喜歡/最能解決您問題的答案旁邊的複選標記。 @TeeDeJee速度更快，但解釋的東西需要時間。它由你決定。 – connexo

所以你選擇了更快，更不詳細的答案，這是完美的罰款。如果你至少可以給我答案upvote（標記它有幫助）？ – connexo

如何從Bootstrap主題懸停時刪除導航下劃線？

回答

相關問題