Блок загрузочных вкладок после зависания над темой

Question

У меня есть четыре вертикальных таблетки, и они показывают контент, когда я навис над ними, но после того, как я навешиваю на них один раз, они больше не работают. Я сделал демо на Codepen here.

Моя цель - показать вкладку активного теста 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.