如何使用地鐵用戶界面側邊欄和緊湊型課程

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