CODEWITHSUNDEEP
htmltwitter-bootstrapcsstwitter-bootstrap-3
Arie
Arie

Reputation: 3563

Bootstrap buttons hover unexpected hover color

I have strange behaviour on my bootstrap navbar. When i move mouse over my three buttons the down color of them changing as navbar color. Can you tell me how can i change that - but only for those three buttons as i have more of them on my site so dont want to do the change too all available buttons but only those theree. Here how it looks like.

[![enter image description here][1]][1] [![enter image description here][2]][2]

inspected button:

[![enter image description here][3]][3]

buttons:

<li><a href="#" class="btn btn-primary btn-xs" onclick="changeToEn()"><span class="glyphicon glyphicon-flag"></span> EN</a></li>
                    <li><a href="#" class="btn btn-info btn-xs" onclick="changeToDe()"><span class="glyphicon glyphicon-flag"></span> DE</a></li>
                    <li><a href="#" class="btn btn-success btn-xs" onclick="changeToPl()"><span class="glyphicon glyphicon-flag"></span> PL</a></li>

navbar code:

 <div class="pl">
  <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
    <a class="navbar-brand" href="#">
        <!--<img id="brand-image" alt="Website Logo" src="111.png" /> -->
        <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home"></span> Oblah</a>
    </a>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                   <li><a href="#feedback" class="de"><span class="glyphicon glyphicon-user"></span> Oblah</a></li>            
                    <li><a href="#gallery"><span class="glyphicon glyphicon-credit-card"></span> Oblah</a></li>  
                    <li><a href="#features"><span class="glyphicon glyphicon-th-large"></span> Oblah</a></li>  
                    <li><a href="#faq"><span class="glyphicon glyphicon-headphones"></span> Oblah</a></li>  
                    <li><a href="#contact"><span class="glyphicon glyphicon-earphone"></span>Oblah</a></li>  

                    <li><a href="#" class="btn btn-primary btn-xs highlight" onclick="changeToEn()"><span class="glyphicon glyphicon-flag"></span> EN</a></li>
                    <li><a href="#" class="btn btn-info btn-xs highlight" onclick="changeToDe()"><span class="glyphicon glyphicon-flag"></span> DE</a></li>
                    <li><a href="#" class="btn btn-success btn-xs highlight" onclick="changeToPl()"><span class="glyphicon glyphicon-flag"></span> PL</a></li>

                </ul>
            </div>
        </div>
    </div>
    </div>

Upvotes: 0

Views: 1519

Answers (1)

QGA
QGA

Reputation: 3192

Please see the following demo

https://jsfiddle.net/7cr08k2b/2/

.navbar-inverse .navbar-nav > li > a.highlight:hover,
.navbar-inverse .navbar-nav > li > a.highlight:focus {
    color: white;
    background-color: transparent;
    box-shadow: inset 0px 6px 0px white;
}
.navbar-inverse .navbar-nav > .active > a.highlight,
.navbar-inverse .navbar-nav > .active > a.highlight:hover,
.navbar-inverse .navbar-nav > .active > a.highlight:focus {
    color: white;
    background-color: transparent;
    box-shadow: inset 0px 6px 0px white;
}

EDIT

<li><a href="#" class="btn btn-primary btn-xs highlight" onclick="changeToEn()"><span class="glyphicon glyphicon-flag"></span> EN</a></li>
<li><a href="#" class="btn btn-info btn-xs highlight" onclick="changeToDe()"><span class="glyphicon glyphicon-flag"></span> DE</a></li>
<li><a href="#" class="btn btn-success btn-xs highlight" onclick="changeToPl()"><span class="glyphicon glyphicon-flag"></span> PL</a></li>

Upvotes: 1

Related Questions