Tıklandığında ve Üzerine Geldiğinde Düşürme Menüsünün Renkini Değiştirin

Üzerine tıklattığımda açılan menümüm navbar-default rengine geri döner. Ve açılır menüdeki öğelerin üzerine geldiğimde, navbar-default rengine de dönerler. İşte Tıklandığında ve Üzerine Geldiğinde Düşürme Menüsünün Renkini Değiştirin

benim HTML var: Burada

ne demek bir resmi

<div class="collapse navbar-collapse navHeaderCollapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Home</a></li> 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Internet<span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Cable</a></li> 
        <li><a href="#">DSl</a></li> 
        <li><a href="#">Wireless</a></li> 
        <li><a href="#">Business Cable</a></li> 
        <li><a href="#">Business DSL</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Phone</a></li> 
      <li><a href="#">Android TV</a></li> 
      <li><a href="#">Shaw Direct</a></li> 
      <li><a href="#">Careers</a></li> 
     </ul> 
    </div>

Ve işte benim CSS:

.navbar-default { 
    background-color: #00AEFE; 
} 
.navbar-default:visited { 
    background-color: #00AEFE; 
} 
ul.dropdown-menu { 
    background-color: #00AEFE; 
} 
ul.dropdown-menu:hover { 
    background-color: #00AEFE; 
}

kaynak

2016-12-30 Thomas Hutton

deneyin background-color 'gibi important'' ekleyerek:! # 00AEFE önemli; 'Bu olmayı o belirli bir stil zorlamak gerekir en önemli. –

Mümkün olan yinelenen [Twitter Bootstrap 3'te navbar rengini değiştir] (http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3) – vanburen

Bir soru sormadınız veya Sorunları gidermek için yeterli CSS dahil edildi. Bir öğeye tıklarken gördüğünüz renkten bahsediyorsanız (sol tıklama basılı tutulduğunda), bu:: active 'psödoklass'tır. –

sadece bu üzerine ilgisi önyükleme sınıfı

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover { 
    background-color: #00AEFE; 
} 
.nav > li > a:focus, .nav > li > a:hover { 
    background-color: #00AEFE; 
}

Snippet ile kontrol edin, ihtiyacınız olan şey bu mu? Daha sonra kontrol parçacığını çalıştırın ve tam ekran moduna değiştirmek

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<style> 
 
ul.dropdown-menu { 
 
    background-color: #00AEFE; 
 
} 
 
ul.dropdown-menu:hover { 
 
    background-color: #00AEFE; 
 
} 
 
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover { 
 
    background-color: #00AEFE; 
 
} 
 
.nav > li > a:focus, .nav > li > a:hover { 
 
    background-color: #00AEFE; 
 
} 
 

 
</style> 
 
<div class="collapse navbar-collapse navHeaderCollapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#">Home</a></li> 
 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Internet<span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">Cable</a></li> 
 
        <li><a href="#">DSl</a></li> 
 
        <li><a href="#">Wireless</a></li> 
 
        <li><a href="#">Business Cable</a></li> 
 
        <li><a href="#">Business DSL</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Phone</a></li> 
 
      <li><a href="#">Android TV</a></li> 
 
      <li><a href="#">Shaw Direct</a></li> 
 
      <li><a href="#">Careers</a></li> 
 
     </ul> 
 
    </div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

kaynak

2016-12-30 01:46:53

Tıklandığında ve Üzerine Geldiğinde Düşürme Menüsünün Renkini Değiştirin

cevap

İlgili konular