Bootstrap - yalnızca çökmüş navbardan gelen hover efekti nasıl kaldırılır?

Question

Her bağlantının sayfada bir bölüme kaydırıldığı navbarlı bir sayfam var.

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

Bu metin daha koyu hale varsayılan vurgulu animasyon bootstrap ektir: Ben aşağıdaki gibi bir vurgulu animasyon var. Kod kaleminde bir demo var burada http://codepen.io/meek/pen/NNprYb

Daha küçük aygıtlarda, daraltma listesi genişlediğinde, mavi kutu fareyi de tetikler. Ama ben bootstrap varsayılan hover css bunun için yeterli olduğu gibi, daraltılmış liste çapalar tetiklemek istemiyorum.

nasıl genişletilmiş gezinme çubuğu görüntüleniyor hover efekti durdurabilir ?

Answer 1

Düğmelerin farklı aygıt boyutlarında nasıl görünmesi gerektiğini tanımlamak için CSS ortam sorgularını kullanabilirsiniz. Örneğin

çöktü nav öğeler üzerinde sınır gölge kaldırmak için bu özel durumda:

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

}