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

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


Если с основными 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="menu-drop-promo">
                                <a href="produksya/elektrotransport/" class="catalog-link active">
                                    <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">Транспорт</span>
                                </a>
                                <a href="produksya/oborudovanie-dlya-gorodskogo-elektrotransporta/" 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">Оборудование</span>
                                </a>
                                <a href="produksya/preobrazovateli/" 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">Преобразователи</span>
                                </a>
                                
                                <a href="produksya/preobrazovateli/" 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">Преобразователи</span>
                                </a>
                                <a href="produksya/preobrazovateli/" class="catalog-link2 active">
                                <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">Преобразователи</span>
                                </a>
                                <a href="produksya/preobrazovateli/" 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">Преобразователи</span>
                                </a>
                            </div>
Код на jQuery, потому что изначально почти весь сайт был на нем, а так приветствую любые форматы решения.
Код и верстка были изначально, поэтому не я был инициатором данного способа и объяснить логику не смогу. Если есть дополнительные вопросы, с радостью отвечу.
Подскажите как можно быстро решить проблему?
Владислав
28 марта 2023, 16:25
modx.pro
417
+1

Комментарии: 0

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
0