Вывести изображения категории при наведении на категорию или товар в выпадающем навигационном меню
Есть выпадающие меню в виде раздельных блоков, где последний блок отвечает за вывод соответствующей изображения-ссылки, при наведении на соответствующую категорию или товар.
Если с основными 3 категориями справился, то с остальными возникли проблемы.
Вот код который выводит изображение основных 3 категорий и пытается сделать то же с другими(неудачнчо)
и верстка самих изображений
Код и верстка были изначально, поэтому не я был инициатором данного способа и объяснить логику не смогу. Если есть дополнительные вопросы, с радостью отвечу.
Подскажите как можно быстро решить проблему?
Если с основными 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, потому что изначально почти весь сайт был на нем, а так приветствую любые форматы решения.Код и верстка были изначально, поэтому не я был инициатором данного способа и объяснить логику не смогу. Если есть дополнительные вопросы, с радостью отвечу.
Подскажите как можно быстро решить проблему?