Twitter引导导航栏按钮颜色在悬停时发生变化答案

【问题标题】：Twitter bootstrap navbar button color changes on hoverTwitter引导导航栏按钮颜色在悬停时发生变化
【发布时间】：2014-06-03 03:22:05
【问题描述】：

在我的 Twitter 引导网站中，我有一个导航栏。它上面有按钮。
我向它们添加“btn-success”或“btn-danger”类以进行颜色标记。
我这样做是因为当用户更改主题 (css) 按钮时，会显示相对于 that theme 的按钮。

我使用navbar-inverse。所以背景是黑色的。我将按钮链接的颜色更改为白色。但问题是当用户将鼠标悬停在按钮上时，按钮变为透明并且无法读取颜色。

所以我需要导航栏按钮可见，即使用户将鼠标悬停在其上。我希望按钮颜色在悬停时相同。

我的小提琴：http://jsfiddle.net/mavent/4RhhF/15/

<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header" style="text-align:center;">
        <div style="padding-top: 15px;"> 
            <a href="/page0" style="color:#ffffff;margin-top:40px;">Example.com</a>    
        </div>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li>
                <a class="btn btn-danger" style="color:#000" href="#">
                    <span>MyButton is very good</span>
                </a>    
            </li>
            <li>
                <a class="btn btn-success" style="color:#000" href="#">
                    <span>MyButton is very good 2</span>
                </a>    
            </li>
        </ul>
    </div>
</nav>

【问题讨论】：

先生，您有答案了！ ;)

标签： html css twitter-bootstrap

【解决方案1】：

您必须在自定义 css 文件中添加以下内容：

/* This would be for the danger button... */
.navbar-inverse .navbar-nav>li>a.btn-danger:hover {
    background-color: #d9534f;
}

/* ...and this one for the success button */
.navbar-inverse .navbar-nav>li>a.btn-success:hover {
    background-color: #5cb85c;
}

您基本上是在悬停时手动重新着色每个按钮的背景颜色。

这里是your updated fiddle。

【讨论】：