Bootstrap - 如何僅從折疊的導航欄中刪除懸停效果？

Question

我有一個帶有導航欄的頁面，其中每個鏈接都滾動到頁面中的一個部分。 我有一個懸停動畫，如下所示：

.navbar-default .navbar-nav li a:hover,
.navbar-default .navbar-nav li a:active {
    box-shadow: 0 4px 0px 0px #62c4a4;
}

這是引導程序默認的使文本變暗的懸停動畫的補充。 這里有一個代碼筆演示http://codepen.io/meek/pen/NNprYb

在較小的設備上，當折疊列表展開時，也會觸發藍色框陰影懸停。 但我不希望它在折疊列表錨點中觸發，因為引導程序默認懸停 css 就足夠了。

如何停止在展開的導航欄上顯示懸停效果？

Answer 1

您可以使用 CSS 媒體查詢來定義按鈕在不同設備尺寸上的外觀。

例如，在這種特殊情況下，要移除折疊的導航項上的邊框陰影：

@media (max-width: 768px) {

 .navbar-default .navbar-nav li a:hover, 
 .navbar-default .navbar-nav li a:active, 
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover, 
 .navbar-default .navbar-nav > .active > a:focus {
        box-shadow: none;
 }

}