CSS Bootstrap停止在活動項目上懸停邊框

如何停止正在應用兩次邊框...一次用於活動項目和一次懸停？我試過使用.navbar a:not(.active):hover但它不起作用。我也試着給所有的導航欄項目提供一個底部邊框，它具有所需的厚度，但是背景顏色和改變懸停的顏色。CSS Bootstrap停止在活動項目上懸停邊框

的期望的效果是，活動項爲黑體且白色bottom-border，而鼠標在還具有白色bottom-border（紅色所示的圖像中），但並不以粗體（既作爲項目顏色將是白色的我不會爲打贏哪一個而煩惱）。但我的問題是，當鼠標移動到活動項目上時，bottom-border被添加兩次。

來源

2015-12-30 B_D

尋求代碼幫助的問題必須包含在問題本身**中重現**所需的最短代碼。請參閱[**如何創建最小，完整和可驗證示例**]（http://stackoverflow.com/help/mcve）。 CSS的圖像不是代碼.... –

一個元素不能有兩個邊框，所以這裏顯然有兩個元素....可能是一個'li'和一個錨'a' ...決定哪一個獲得邊框並調整相應的CSS。 –

@Paulie_D：我知道一個元素不能有兩個邊框，我有一個'li'包含一個'Html.ActionLink'會稍後算作一個錨點'a'嗎？ –

這很可能是由於邊境被應用到2個不同的元素。

我讓你瞭解了這個問題fiddle。

正如你所看到的，所有工作正常，因爲.active類和：hover僞類都被稱爲ul> li。

ul > li.active{ 
    border-bottom:3px solid red; 
} 

ul > li:hover{ 
    border-bottom: 3px solid yellow; 
}

如果您嘗試將例如：hover更改爲ul> li> a，您會看到雙邊框。

ul > li.active{ 
    border-bottom:3px solid red; 
} 

ul > li > a:hover{ 
    border-bottom: 3px solid yellow; /* double border */ 
}

來源

2015-12-30 10:43:13 fbid

謝謝你，我認爲這將是沿着這條線。我製作了自己的[jsfiddle]（https://jsfiddle.net/6Lp9xpou/）（可能不起作用，這是我的第一次嘗試）。但正如你所看到的懸停背景顏色是淺灰色，我希望它與背景相同（所以它看起來不是什麼），但無法讓它工作。 –

在這裏，你是工作[小提琴]（https://jsfiddle.net/6Lp9xpou/2/）沒有灰色背景。它是由'.nav> li> a：hover'中的背景規則引起的，需要被覆蓋。您可以在小提琴中的CSS部分的最後幾行看到它的評論。如果解決了您的問題，請將我以前的答案表達爲正確。謝謝 – fbid

我需要更多地玩這個，它在jsfiddle中可以正常工作，但是在我的項目中我仍然得到雙邊界:( –

CSS Bootstrap停止在活動項目上懸停邊框

回答

相關問題