Как заставить кнопку загораться при наведении с помощью загрузочного буфера twitter

Question

Я строю сайт, используя CSS-твитер bootstrap, но у меня возникла проблема.

nav bar example

Если смотреть ближе к концу, "Bootstrap" является своего рода скрытый; он загорается только при наведении курсора мыши (но по умолчанию он черный). Как получить эту функцию для кнопки на моей веб-странице?

Вот мой Navbar:

<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. Он является частью веб-сайта документации 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; 
} 

Там может быть еще несколько стайлинг, что составляет полный эффект, но это должно вам начать работу.

Answer 2

Проблема заключается в переопределении цвет текста бренда с помощью встроенного стиля, который подменяет стили бутстраповских

Вместо того, чтобы использовать встроенный стиль для изменения цвета бренда, использовать класс

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

Demo : Fiddle

Важно
Но я думаю, что правильным решением будет создать custom version of bootstrap, изменив свойство @navbarBrandColor на то, что вам нужно, вместо того, чтобы вручную переопределять стиль в вашем файле css