javascript - 如何使用 twitter bootstrap 使按钮在悬停时亮起

Question

我正在使用 twitter bootstrap 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>部分像他们的 Bootstrap 按钮一样工作。

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

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