CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
RS92
RS92

Reputation: 485

Why I can't change color on hover of nav tabs

I have navigation created using nav tabs.

I wan't to set color on hover, but I can't

I tried this, but not working .

.tab2:hover {
    background-color: green;
}

.tab3:hover {
    background-color: green;
}

HTML

<div class="col-md-10">
    <nav class="row">
        <ul class="nav nav-tabs">
            <li class="tab1"><a href="#"> <span class="glyphicon glyphicon-user"></span> Name &nbsp &nbsp<span class="glyphicon glyphicon-chevron-down"></span> </a></li>
            <li class="tab1"><a href="#"><span class="glyphicon glyphicon-flag"></span>Text Link </a> </li>
            <li class="tab1"><a href="#"> <span class="glyphicon glyphicon-envelope"></span> Message </a> </li>
            <li class="tab1"><a href="#"> <span class="glyphicon glyphicon-oil"></span>10 </a> </li>
            <li class="tab1"><a href="#"><span class="glyphicon glyphicon-asterisk"></span> &nbsp </a> </li>
            <li class="tab1"><a href="#"><span class="glyphicon glyphicon-home"></span>&nbsp </a> </li>
            <li class="tab2"><a href="#"> <span class="glyphicon glyphicon-chevron-down"></span> &nbsp &nbsp KATEGORIJE </a></li>
            <li class="tab2"><a href="#">RADNJE</a></li>
            <li class="tab2"><a href="#">VOZILA</a></li>
            <li class="tab2"><a href="#">NEKRETNINE</a></li>
            <li class="tab2"><a href="#">NAJNOVIJE</a></li>
            <li class="tab2"><a href="#">HITNO</a></li>
            <li class="tab2"><a href="#">USLUGE</a></li>
            <li class="tab2"><a href="#"> &nbsp &nbsp &nbsp &nbsp<span class="glyphicon glyphicon-chevron-down"></span> &nbsp &nbsp OSTALI LINKOVI </a></li>
        </ul>
    </nav>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}


.nav>li>a {
    padding: 10px 3px;
    font-weight: bold;
    color:white;
    font-size: 13px;
}
.tab1 {
    background-color:#324255;
    height: 42px;
}

.tab2 {
    background-color:#405072;
    height: 42px;
}
.tab3 {
    background-color: #405072;
    height:42px;

}
.nav-tabs li {
    border-left: 1px solid #52617b;
    border-right: 1px solid #52617b;

}

ul {
    background-color: #405072;
    height:43px;
}


.tab2:hover {
    background-color: green;
}

.tab3:hover {
    background-color: green;
}

Upvotes: 0

Views: 3771

Answers (1)

Alex
Alex

Reputation: 357

I'll try to be as specific as I can so you understand it all. 1. When I pasted your html and css in the fiddle, I forgot to add the link for bootstrap stylesheet in the html as well. Bootstrap uses a CDN as you might know and it allows you to link with their stylesheet without downloading it and actually placing it in your website folders. This is the link I am referring to: 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

I just added this above all the html in the fiddle.

  1. To answer your original question. Bootstraps stylesheet is overwriting your stylesheet.

Your <li> is working fine and has a green background. But the <a> has a background color of its own which is coming from bootstrap.

See fiddle here https://jsfiddle.net/otuy1foo/3/. And in the css I placed the css code in comments at the bottom. 

/*This is the css you need to add*/
.nav-tabs>li>a:hover, .nav>li>a:focus, .nav>li>a:hover {
    border-color: transparent !important;
    background-color: transparent !important;
}

Upvotes: 2

Related Questions