Wechseln Sie zu glyphicons-weiß auf schweben mit bootstrap

bootstrap-Staaten, die

Es sind auch Ausführungen erhältlich für invertiert (weiß) - Symbole, fertig gemacht
mit einem extra-Klasse. Wir werden insbesondere die Durchsetzung dieser Klasse auf hover
und aktive Zustände für die nav und die dropdown-links.

diese scheint nicht zu funktionieren auf meiner navbar (Teile weggelassen aus Gründen der Einfachheit).
Dies ist der div-Kette. 

<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>

den css-code von bootstrap ist

.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);
}

Den Schalter, passiert das mit dieser css-code

.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" %>);

}

sollte ich noch etwas hinzufügen oder hab ich was verpasst? Warum funktioniert mein css funktioniert, aber bootstrap-code nicht?

InformationsquelleAutor Nick Ginanto | 2012-12-09

  1. 4

    Wenn Sie nur fügen Sie eine Klasse, um Ihr Bild mit bootstrap, würde ich vorschlagen, dass Sie jQuery verwenden, fügen Sie die Klasse auf schweben und zu entfernen, um die Klasse auf mouseOut. Wie? Hier ist ein guter Weg :

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

    In diesem Fall, die erste Funktion ist das, was passiert auf dem mouseover und die zweite, wenn die hover-Zustand ist nicht mehr wahr!
    Hoffe, es half!

    InformationsquelleAutor Yann Chabot

  2. 2

    Können Sie diese in einen einfacheren Weg mit nur 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>

    InformationsquelleAutor Aaron

  3. 1

    Fügen Sie eine Klasse mit verschiedenen Farben, Symbole 

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

    Dann die jQuery-toggle-Klasse 

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

    InformationsquelleAutor feitla

Schreibe einen Kommentar