css - link background not changing according to what i want -


here code example

the .navbar has 0.5 transparency , not want background of links changed when hovering. (right background white)

if use navbar-default class can change background of list items , links not able transparency thing. , if dont use navbar-default/inverse able navbar transparent links have background property on hover, not able override.

html

<nav role="navigation" class="navbar navbar-fixed-top">   <div class="container-fluid">     <div class="navbar-header">       <a href="#" class="navbar-brand"><img class="logo" src="images/brand.png"></a>       <button type="button" class="navbar-toggle" data-target="#navbarcollapse" data-toggle="collapse"><span class="sr-only">toggle</span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span></button>     </div>     <div class="navbar-collapse collapse" id="navbarcollapse">       <ul class="nav navbar-nav">         <li class=""><a href="#">home</a></li>         <li><a href="#">about</a></li>         <li><a href="#">portfolio</a></li>         <li><a href="#">contact</a></li>       </ul>     </div>   </div> </nav> 

css

 .navbar {    background: rgba(0, 0, 0, 0.5);    font-family: avro;  }   .nav li a:hover {    background: none;  } 

sadly need override boostrap style !important. besides not recommend use background:none; need override background-color property recommend add css:

.nav > li > a:hover {   background-color: transparent !important;   /* smooth override important */ } 

Comments

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -