Wie U-Ui Css Sidebar und kompakte Klassen verwenden

Question

Ich habe Probleme mit Sidebar und Kompaktklasse. In dieser ul möchte ich Bilder des Inhalts aber nicht ihres Textes anzeigen. Der Text wird nur bei Mauszeiger angezeigt.

<ul class="sidebar compact"> 
<li> 
    <a href="#"> 
     <span class="mif-apps icon"></span> 
     <span class="title">all items</span> 
     <span class="counter">1</span> 
    </a> 
</li> 
<li> 
    <a href="#"> 
     <span class="mif-apps icon"></span> 
     <span class="title">all items</span> 
     <span class="counter">2</span> 
    </a> 
</li> 
<li> 
    <a href="#"> 
     <span class="mif-apps icon"></span> 
     <span class="title">all items</span> 
     <span class="counter">3</span> 
    </a> 
</li> 

Answer 1

In jQuery, weiter unten, um es auf Maus lebendig zu machen über und Maus lassen

<ul class="sidebar compact"> 
<li> 
    <a href="#"> 
     <span class="mif-apps icon"></span> 
     <span class="title">all items</span> 
     <span class="counter">1</span> 
    </a> 
</li> 
<li> 
    <a href="#"> 
     <span class="mif-apps icon"></span> 
     <span class="title">all items</span> 
     <span class="counter">2</span> 
    </a> 
</li> 
<li> 
    <a href="#"> 
     <span class="mif-apps icon"></span> 
     <span class="title">all items</span> 
     <span class="counter">3</span> 
    </a> 
</li> 

Hier ist ein jQuery, die Kompaktklasse entfernt sie zu strecken, wenn Die Maus ist vorbei und fügt eine Kompaktklasse hinzu, wenn die Maus das Gerät zurückkomprimiert.

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.sidebar').hover(function() { 
     $(".sidebar").removeClass("compact"); 
    }); 
    $('.sidebar').mouseleave(function() { 
     $(".sidebar").addClass("compact"); 
    }); 
});