Question

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

[！[在此处输入图片说明] [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>

navbar代码：

 <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()"> EN</a></li> <li><a href="#" class="btn btn-info btn-xs highlight" onclick="changeToDe()"> DE</a></li> <li><a href="#" class="btn btn-success btn-xs highlight" onclick="changeToPl()"> PL</a></li>

Bootstrap按钮悬停意外的悬停颜色

1 个答案: