Interrupteur à glyphicons-blanc sur le vol stationnaire avec bootstrap

bootstrap états qui

Il y a aussi les styles disponibles pour inversées (blanc) des icônes prêt
avec une classe supplémentaire. Nous allons plus précisément d'appliquer cette classe sur le vol stationnaire
et les états actifs pour nav et déroulante des liens.

cela ne semble pas fonctionner sur ma barre de navigation (pièces omises par souci de simplicité).
C'est le div de la chaîne. 

<div class="navbar navbar-inverse navbar-fixed-top ">
    <div class="navbar-inner ">
        <div class="container">
         <div class="nav-collapse collapse ">
           <ul class="nav" >
            <li><%= link_to content_tag(:i," ", :class=>"icon-envelope")+ " " +"Messages, messages_path %> </li>

le code css de bootstrap est

.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: url(/assets/twitter/bootstrap/glyphicons-halflings-white.png);
}

Le commutateur arrive avec ce code css

.navbar-inverse .nav  a:hover [class^="icon-"],
.navbar-inverse .nav a:hover  [class*=" icon-"]{
        background-image: url(<%= asset_path "/assets/twitter/bootstrap/glyphicons-halflings-white.png" %>);

}

dois-je ajouter quelque chose ou ai-je raté quelque chose? Pourquoi mon css fonctionne mais bootstrap code ne fonctionne pas?

OriginalL'auteur Nick Ginanto | 2012-12-09

  1. 4

    Si vous n'avez qu'à ajouter une classe à votre image avec bootstrap, je vous suggérons d'utiliser jQuery pour ajouter la classe sur le vol stationnaire et de supprimer à la classe sur mouseOut. Comment? Voici une bonne façon :

        $("yourSelector").hover(
       function () {
         $(this).toggleClass('datWhiteClass');
       }, 
      function () {
          $(this).toggleClass('datWhiteClass');
       }
     );

    Dans ce cas, la fonction première est ce qu'il se passe sur le mouseover et la seconde, lorsque l'état de pointage n'est plus vrai!
    Espérons qu'il a aidé!

    OriginalL'auteur Yann Chabot

  2. 2

    Vous pouvez le faire de façon plus simple avec uniquement du css.

    <style>
#my-button:hover {
  background-color: #0000ff;
}
#my-button:hover span {
  color: #ffffff;
}
</style>

<button id="my-button">
    <span class="glyphicon glyphicon-pencil"></span>
</button>

    OriginalL'auteur Aaron

  3. 1

    Ajouter une classe avec des couleurs différentes icônes 

    .icon-teal {background-image: url("../images/icons/glyphicons-halflings-teal.png") !important;}

    Ensuite utiliser jQuery pour basculer de la Classe 

    $("div.row_action a").hover(
   function () {
    $(this).toggleClass('icon-teal');
   }, 
  function () {
     $(this).toggleClass('icon-teal');
   }
 );

    OriginalL'auteur feitla