Bootstrap Togglable選項卡。當我將鼠標懸停在`.nav-tabs> li`上時，如何顯示.tab-pane內容，然後在鼠標離開時隱藏內容？

Question

我有使用Twitter Bootstrap的可切換標籤。我的問題是我的.tab-content被隱藏，我想在鼠標指針進入.nav-tabs > li時顯示它，並在鼠標指針離開元素時將其隱藏。

這裏是我的代碼：

 <div role="tabpanel" class="tabpanel"> 
      <div class="container"> 
      <!-- company tabs --> 
      <ul class="nav nav-tabs" role="tablist"> 
       <li role="presentation"> 
       <a href="#sigma" aria-controls="sigma" role="tab" data-toggle="tab" class="boxopacity"> 
        <span>TAb1</span> 
       </a> 
       </li> 
       <li role="presentation"> 
       <a href="#alpek" aria-controls="alpek" role="tab" data-toggle="tab" class="boxopacity"> 
        <span>TAb2</span> 
       </a> 
       </li> 
       <li role="presentation"> 
       <a href="#nemak" aria-controls="nemak" role="tab" data-toggle="tab" class="boxopacity"> 
        <span>TAb3</span> 
       </a> 
       </li> 
      </ul><!-- .end company tabs --> 

      <!-- company information --> 
      <div class="tab-content"> 
       <!-- company sigma --> 
       <div role="tabpanel" class="tab-pane fade" id="sigma"> 
       <div class="box largebox"> 
        <div class="content"> 
        <h5>Tab1</h5> 
        </div> 
       </div> 
       <div class="box mediumbox"> 
        <div class="content"> 
        <h6>Productos principales</h6> 

        <h6>Mercados</h6> 
        <ul> 
         <li>Alimentos</li> 
        </ul> 
        </div> 
       </div> 
       <div class="box mediumbox"> 
        <div class="content"> 
        <h6>Cifras relevantes</h6> 
        <ul class="relevant"> 
        </ul> 
        </div> 
       </div> 
       <div class="box mediumbox"> 
       </div> 
       </div> 

       <!-- company alpek --> 
       <div role="tabpanel" class="tab-pane fade" id="alpek"> 
       <div class="box largebox"> 
        <div class="content"> 
        <h5>Tab2</h5> 
        </div> 
       </div> 
       <div class="box mediumbox"> 
        <div class="content"> 
        <h6>Productos principales</h6> 

        <h6>Mercados</h6> 
        </div> 
       </div> 
       <div class="box mediumbox"> 
        <div class="content"> 
        <h6>Cifras relevantes</h6> 
        <ul class="relevant"> 
         <li>Plantas</li> 
        </ul> 
        </div> 
       </div> 
       <div class="box mediumbox"> 
       </div> 
       </div> 

       <!-- company nemak --> 
       <div role="tabpanel" class="tab-pane fade" id="nemak"> 
       <div class="box largebox"> 
        <div class="content"> 
        <h5>Tab3</h5> 
        </div> 
       </div> 
       <div class="box mediumbox"> 
        <div class="content"> 
        <h6>Productos principales</h6> 

        <h6>Mercados</h6> 
        <ul> 
         <li>Automortiz.</li> 
        </ul> 
        </div> 
       </div> 
       <div class="box mediumbox"> 
        <div class="content"> 
        <h6>Cifras relevantes</h6> 
        <ul class="relevant"> 
        </ul> 
        </div> 
       </div> 
       <div class="box mediumbox"> 
       </div> 
       </div> 
      </div><!-- .end company information --> 
      </div> 
     </div> 

我的Jquery：

<script> 
    $(document).ready(function(){ 
     $('.nav-tabs > li > a').hover(function() { 
     $(this).tab('show'); 
     }, function() { 
     });   
    }); 
    </script> 

Answer 1

你可以用的mouseenter &鼠標離開這樣撥弄我剛剛創建做到這一點：

http://jsfiddle.net/jep0n6p9/3/

jQuery

$('.nav-tabs').mouseenter(handlerIn); 
$('.tab-content').mouseleave(handlerOut); 

function handlerIn() { 
    $('.tab-content').show(); 
} 

function handlerOut() { 
    $('.tab-content').hide(); 
} 

Answer 2

請使用上nav-tab鼠標離開事件隱藏選項卡的內容。
請檢查這個鏈接：http://jsfiddle.net/yLq1df22/

希望這可能對你有所幫助。