Здравствуйте. Делаю сайт, на сайте есть раздел с категориями, у каждой категории есть своя иконка. При приведении иконка меняется на другую. У каждой иконки есть своя вторая версия с таким же названием и приставкой 2. Чтобы не писать в css файле стили для всех категорий (а их достаточно много 10+) решил сделать через JS и data атрибуты.
Подскажите, насколько это костыльно, если очень дайте совет как лучше. Спасибо.
Так выглядит код одной из категорий
<div class="categories__img " data-name="design"> </div>
JS
let categoriesIcon = document.querySelectorAll('.categories__img');
categoriesIcon.forEach(element => {
element.style.background = `url(../img/${element.dataset.name}.png) center / cover`;
element.addEventListener('mouseout', ()=> {
element.style.background = `url(../img/${element.dataset.name}.png) center / cover`;
});
element.addEventListener('mouseover', ()=> {
element.style.background = `url(../img/${element.dataset.name}2.png) center / cover`;
});
});
