如何使用 twitter bootstrap 使按钮在悬停时亮起答案

【问题标题】：How to make a button light up on hover with twitter bootstrap如何使用 twitter bootstrap 使按钮在悬停时亮起
【发布时间】：2013-06-28 02:53:30
【问题描述】：

我正在使用 twitter 引导 CSS 构建网站，但遇到了问题。

nav bar example

如果你往最后看，“Bootstrap”有点隐藏；它仅在您将鼠标悬停时才会亮起（但默认情况下，它是黑色的）。如何为网页中的按钮获取此功能？

这是我的导航栏：

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
           <a href="./home.html" class="brand" color="black"></a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active">
                <a href="#">Home</a>
              </li>
              <li class="">
                <a href="./tutoring.html">Tutoring</a>
              </li>
              <li class="">
                <a href="./competitions.html">Competitions</a>
              </li>
              <li class="">
                <a href="./board.html">Board Members</a>
              </li>
              <li class="">
                <a href="./info.html">Info</a>
              </li>
              <li class="">
                <span class="span5"></span>
              </li>
              <li class="" id="algebrayall">
                <a class="brand pull-right" style="color:black" href="./index.html">It's just algebra, y'all</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
</div>

我希望<a class="brand pull-right" style="color:black" href="./index.html">It's just algebra, y'all</a> 部分像他们的引导按钮一样工作。

【问题讨论】：

没有这个属性color="black"

标签： javascript html css button twitter-bootstrap

【解决方案1】：

它不是 Bootstrap.css 的一部分。它是 twitter 文档网站 css (docs.css) 的一部分。

这是brand 的基本样式：

body > .navbar .brand {
    padding-right: 0;
    padding-left: 0;
    margin-left: 20px;
    float: right;
    font-weight: bold;
    color: #000;
    text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    transition: all .2s linear;
}

还有悬停效果：

body > .navbar .brand:hover {
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4);
}

.navbar-inverse .brand:hover, .navbar-inverse .nav > li > a:hover, .navbar-inverse .brand:focus, .navbar-inverse .nav > li > a:focus {
    color: #ffffff;
}

可能还有更多的样式可以构成完整的效果，但这应该可以帮助您入门。

【讨论】：

【解决方案2】：

问题是您正在使用覆盖引导样式的内联样式覆盖品牌的文本颜色

不要使用内联样式来更改品牌的颜色，而是使用类

.navbar-inverse.navbar .brand {
    color: black;
}

演示：Fiddle

重要
但我认为正确的解决方案是通过将@navbarBrandColor 属性更改为您想要的任何内容来创建custom version of bootstrap，而不是手动覆盖css 文件中的样式

【讨论】：

这与 SimonC 上面发布的内容大致相同（我认为除了 pull-right 之外它会实现相同的效果——我想我可以添加 class="pull-right" 来解决这个问题）。谢谢！