テーマの上にマウスを乗せた後にブートストラップのタブがブロックされます

Question

私は4個の鉛筆を持っていて、それらの上にマウスを置くと内容を表示します。 私はCodepen hereでデモを行いました。

私の目標は、アクティブなテスト1のタブをデフォルトで表示し、もう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'); 
}); 

Answer 1

あなたの垂直錠剤il要素がul要素ではなくdiv要素に配置されていません。 div要素をul要素に変更すると、バグが修正されました。

実際の使用例は、https://codepen.io/anon/pen/pEZXomで確認できます。