Changing background color of navigation tabs

My code is:

I want to change the background color of the tabs to green when theyre hovered over.Please tell me the css/jquery

it didnt show the code dor some reason. Ill try again.

/*<div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      <a class="navbar-brand" href="#">Portfolio</a>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
          </div> */

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

1 Like

The following works:

.nav a:hover {
  background: #39EE49 !important;

The “!important” is what’s important. :wink:

1 Like

thank you BenGitter and thank you icartusacrimea. can u tell me why !important is important?

That way other CSS (most likely Bootstrap) can’t override the value (unless using !important themselves).


OK i just added scrollspy to the body and while the background color of the tabs change when i manually hover over them, it doesnt change when i scroll down to their respective ids.


<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">///

thats the html