Смена табов склика на hover js, как переделать?

Question

[Windramix]

Помогите переделать данный скрипт что бы он работал не по клику а по ховеру по пунктам.
Мне нужно будет переделать в html кнопки в виде ссылок при нажатии переходило на другую страницу а при ховере нужно что бы менялась информация.

$('.js-tab-trigger').click(function() {
   var id = $(this).attr('data-tab'),
       content = $('.js-tab-content[data-tab="'+ id +'"]');
   
   $('.js-tab-trigger.active').removeClass('active'); // 1
   $(this).addClass('active'); // 2
   
   $('.js-tab-content.active').removeClass('active'); // 3
   content.addClass('active'); // 4
});

<div class="subnav">
                            <div class="subnav__inner container">
                                <ul class="tab-header">
                                    <li class="tab-header__item js-tab-trigger active" data-tab="1">Терапевт</li>
                                    <li class="tab-header__item js-tab-trigger" data-tab="2">Хирург имплантолог</li>
                                    <li class="tab-header__item js-tab-trigger" data-tab="3">Ортопед</li>
                                </ul>
                                
                                <div class="tab-content">
                                    <div class="tab-content__item js-tab-content active" data-tab="1"> 
                                        <div class="item">
                                            <img src="assets/img/Rectangle 74.jpg" alt="">
                                        </div>
                                        <div class="item">
                                         <div class="title">Терапевт</div>
                                            <div class="text">Мы вынуждены отталкиваться от того, что курс на социально-ориентированный национальный проект требует анализа первоочередных требований. Следует отметить, что высококачественный прототип будущего проекта однозначно определяет каждого участника</div>
                                            <button class="btn btn-1">Записаться</button>
                                        </div>
                                    </div>
                                    
                                    
                                    <div class="tab-content__item js-tab-content" data-tab="2"> 
                                        <div class="item">
                                            <img src="assets/img/Rectangle 74.jpg" alt="">
                                        </div>
                                        <div class="item">
                                         <div class="title">Хирург имплантолог</div>
                                            <div class="text">Мы вынуждены отталкиваться от того, что курс на социально-ориентированный национальный проект требует анализа первоочередных требований. Следует отметить, что высококачественный прототип будущего проекта однозначно определяет каждого участника</div>
                                            <button class="btn btn-1">Записаться</button>
                                        </div>
                                    </div>
                                    
                                    
                                    <div class="tab-content__item js-tab-content" data-tab="3"> 
                                        <div class="item">
                                            <img src="assets/img/Rectangle 74.jpg" alt="">
                                        </div>
                                        <div class="item">
                                         <div class="title">Ортопед</div>
                                            <div class="text">Мы вынуждены отталкиваться от того, что курс на социально-ориентированный национальный проект требует анализа первоочередных требований. Следует отметить, что высококачественный прототип будущего проекта однозначно определяет каждого участника</div>
                                            <button class="btn btn-1">Записаться</button>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>    
                        </div>

Comments

[HardBot]

Это задание, а не вопрос

[Windramix]

HardBot, разобрался сам, если бы это было задание я бы не размещал сюда, а тут хотел получить подсказку или возможно да готовое решение, но описал я задачу как есть.

[HardBot]

Windramix,

Помогите переделать данный скрипт что бы он работал не по клику а по ховеру по пунктам.

По твоему это не задание?

[Windramix]

считай как хочешь. но я решил задачу сам. где нужно было поменять всего один пункт, что не похоже на задание. ты так говорить как буд-то я попросил с 0 сделать всё и даже вёрстку....

[Danny Arty]

HardBot, Это был вопрос. Он ведь привел свой код, показал, что пробовал.

Answer 1

[Windramix]

Оказалось очень просто нужно было использовать mouseenter

$('.js-tab-trigger').mouseenter(function() {
   var id = $(this).attr('data-tab'),
       content = $('.js-tab-content[data-tab="'+ id +'"]');
   
   $('.js-tab-trigger.active').removeClass('active'); // 1
   $(this).addClass('active'); // 2
   
   $('.js-tab-content.active').removeClass('active'); // 3
   content.addClass('active'); // 4
});

Comments

[Фарик Азизов]

https://codepen.io/bizpartneer/pen/jOpvXqB