將鼠標懸停在主題上後的Bootstrap選項卡塊

我有4個垂直選項卡，當我將鼠標懸停在它們上方時，它們會顯示內容，但當我將鼠標懸停在它們上方時，它們不再工作。我在Codepen here上進行了演示。將鼠標懸停在主題上後的Bootstrap選項卡塊

我的目標是默認情況下顯示活動測試1選項卡，而當我們點擊或懸停在其上時，顯示另一個測試（測試2 3和4）。

<div class="container"> 
    <h3>Vertical Pills</h3> 
    <div class="row"> 
    <div class="col-md-3"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
    <div class="col-md-3"> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <div class="col-md-3"> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
    </div> 
    <div class="col-md-3"> 
     <ul class="nav nav-pills nav-stacked"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Menu 1</a></li> 
     <li><a href="#">Menu 2</a></li> 
     <li><a href="#">Menu 3</a></li> 
     </ul> 
    </div> 
    <div class="clearfix visible-lg"></div> 
    </div> 
</div>

和JS文件

$(document).on('mouseenter', '[data-toggle="tab"]', function() { 
    $(this).tab('show'); 
});

來源

2016-09-25 sonia maklouf

請加上代碼片段代替粘貼代碼，謝謝 – JoelBonetR

你的垂直丸il元件不放置在ul元件，但在一個div元件。將div元素更改爲ul元素可修復您的錯誤。

你可以在這裏查看一個工作示例：https://codepen.io/anon/pen/pEZXom。

來源

2016-09-25 21:14:09 hannesbelen

啊愚蠢的錯誤。感謝您的幫助hannesbelen –

將鼠標懸停在主題上後的Bootstrap選項卡塊

回答

相關問題