Bootstrap buttons hover unexpected hover color

Question

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>

Have you inspect the code through your browser? You might have a bottom border applied to your buttons — Aymeric, Jul 28 '15 at 09:35
There's a transparent background property on hover the anchor link, inspect the element, and disable it, it it works , i'll give you how to deal with it as an answer. — BahaEddine Ayadi, Jul 28 '15 at 10:00

QGA · Accepted Answer · 2015-07-28T10:38:11.130

1

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>

edited Jul 28 '15 at 10:38

answered Jul 28 '15 at 10:00

QGA

3,114
7
39
62

`class="btn btn-primary btn-xs highlight"` – QGA Jul 28 '15 at 10:08
yes i meant in css class //do something i want to be as buttons color – Arie Jul 28 '15 at 10:20
@StackUser Please see demo above. I have added a button without the class `highlight` to show that that is specific to your three buttons – QGA Jul 28 '15 at 10:39
hmm maybe when i move over the mouse button should become more "lighty" – Arie Jul 28 '15 at 11:31
There is nothing wrong in there. There are check boxes next to each css file. check or uncheck them and see what happens every time to your buttons – QGA Jul 29 '15 at 07:58
See [this](https://developer.chrome.com/devtools/docs/dom-and-styles#trigger-pseudo-classes-on-element) – QGA Jul 30 '15 at 08:57
my css is linked to remote classes and i have my custom css: : – Arie Jul 30 '15 at 09:37
have you tried to remove the option theme bootstrap-theme.min.css? – QGA Jul 30 '15 at 09:41
i removed and now when move mouse over the button is highliting entire on blue color as navbar – Arie Jul 30 '15 at 09:48
Is it not fixed then? What do you want to achieve – QGA Jul 30 '15 at 09:49
I would like to button has not changed its color, and only highlight it a bit to be more "lighty" – Arie Jul 30 '15 at 09:53
Well done!! [This](http://stackoverflow.com/a/23522301/2511306) can be very explanatory. Glad it helped :) – QGA Jul 30 '15 at 10:40

Bootstrap buttons hover unexpected hover color

1 Answers1