引导按钮悬停意外悬停颜色

Question

我的引导导航栏有奇怪的行为。当我将鼠标移到我的三个按钮上时，它们的向下颜色变为导航栏颜色。你能告诉我如何改变它 - 但仅限于这三个按钮，因为我的网站上有更多按钮，所以不想改变所有可用按钮，但只有那些按钮。这是它的样子。

[![在此处输入图像描述][1]][1] [![在此处输入图片说明][2]][2]

检查按钮：

[![在此处输入图片描述][3]][3]

按钮：

<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>

导航条码：

 <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>

Answer 1

请看下面的演示

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;
}

编辑

<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>