メトロのサイドバーとコンパクトクラスの使い方

Question

サイドバーとコンパクトクラスの使用に問題があります。このulでは、コンテンツのイメージを表示したいがテキストは表示しない。テキストは、マウスのホバー上にのみ表示されます。

<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

、下記の、jQueryの追加マウスオーバーでそれが生き作るために、マウスはここ

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

を離れるときにそれを伸ばすために、コンパクトクラスを除去するjQueryのですマウスが終わった後、コンパクトなクラスを追加してマウスの葉を押して戻します。

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