在我的 Twitter Bootstrap 网站中,我有一个导航栏。它上面有按钮。
我向它们添加“btn-success”或“btn-danger”类以进行颜色标记。
我这样做是因为当用户更改主题 (css) 按钮时,会根据 that theme 显示.
我使用 navbar-inverse
。所以背景是黑色的。我将按钮链接的颜色更改为白色。但问题是当用户将鼠标悬停在按钮上时,按钮变为透明并且无法读取颜色。
所以我需要导航栏按钮可见,即使用户悬停在它上面。无论悬停与否,我都希望按钮颜色相同。
我的 fiddle :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>
最佳答案
您必须在自定义 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 .
关于html - 悬停时 Twitter Bootstrap 导航栏按钮颜色变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23157121/