Вывести изображения категории при наведении на категорию или товар в выпадающем навигационном меню

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

Если с основными 3 категориями справился, то с остальными возникли проблемы. Вот код который выводит изображение основных 3 категорий и пытается сделать то же с другими(неудачнчо)

var $menuPromoLinks = $('.menu-drop-promo .catalog-link');
var $menuPromoLinks2 = $('.menu-drop-promo .catalog-link2');

$('.header-category-list__item').on('mouseover', function (e) {
    var currentId = $(this).index();
    $menuPromoLinks.removeClass('active');
    $($menuPromoLinks[currentId]).addClass('active');
});

$('.header-drop-menu__item').on('mouseover', function (e) {
    var currentId = $(this).index();
    $menuPromoLinks.removeClass('active');
    $menuPromoLinks2.removeClass('active');
    $($menuPromoLinks2[currentId]).addClass('active');
});

и верстка самих изображений

                        <div class="header-menu-drop__col"></div>
                    <div class="header-menu-drop__col"></div>
                    <div class="header-menu-drop__col">
                        <div class="menu-drop-promo">
                            <a href="[[~2]]" class="catalog-link ">
                                <span class="catalog-link__plus"><span class="icon-plus2"></span></span>
                                <span class="catalog-link__pic" style="background-image: url(/assets/img/media_video_1.jpg)"></span>
                                <span class="catalog-link__name">[[*context_key:is=`web`:then=`Транспорт` :else=`Transport`]]</span>
                            </a>
                            <a href="[[~31]]" class="catalog-link">
                                <span class="catalog-link__plus"><span class="icon-plus2"></span></span>
                                <span class="catalog-link__pic" style="background-image: url(/assets/img/container.jpg)"></span>
                                <span class="catalog-link__name">[[*context_key:is=`web`:then=`Оборудование` :else=`equipment`]]</span>
                            </a>
                            <a href="[[~3]]" class="catalog-link">
                                <span class="catalog-link__plus"><span class="icon-plus2"></span></span>
                                <span class="catalog-link__pic" style="background-image: url(/assets/img/convertik.jpg)"></span>
                                <span class="catalog-link__name">[[*context_key:is=`web`:then=`Преобразователи` :else=`Converters`]]</span>
                            </a>
                            
                            <a href="[[~3]]" class="catalog-link2">
                            <span class="catalog-link__plus2"><span class="icon-plus2"></span></span>
                            <span class="catalog-link__pic2" style="background-image: url(/assets/img/partner_1.png)"></span>
                            <span class="catalog-link__name2">[[*context_key:is=`web`:then=`Преобразователи` :else=`Converters`]]</span>
                            </a>
                            <a href="[[~3]]" class="catalog-link2">
                            <span class="catalog-link__plus2"><span class="icon-plus2"></span></span>
                            <span class="catalog-link__pic2" style="background-image: url(/assets/img/convertik.jpg)"></span>
                            <span class="catalog-link__name2">[[*context_key:is=`web`:then=`Преобразователи` :else=`Converters`]]</span>
                            </a>
                            <a href="[[~3]]" class="catalog-link2">
                            <span class="catalog-link__plus2"><span class="icon-plus2"></span></span>
                            <span class="catalog-link__pic2" style="background-image: url(/assets/img/convertik.jpg)"></span>
                            <span class="catalog-link__name2">[[*context_key:is=`web`:then=`Преобразователи` :else=`Converters`]]</span>
                            </a>
                        </div>
                        
                    </div>  

Код на jQuery, потому что изначально почти весь сайт был на нем, а так приветствую любые форматы решения. Код и верстка были изначально, поэтому не я был инициатором данного способа и объяснить логику не смогу. Если есть дополнительные вопросы, с радостью отвечу. Подскажите как можно быстро решить проблему?


Ответы (0 шт):