Затемнение элементов при наведении на JavaScript

В веб-разработке часто возникает необходимость выделять элементы интерфейса при взаимодействии с пользователем. Один из способов сделать это — затемнение остальных элементов при наведении курсора на один из них. В данной статье мы рассмотрим, как это можно реализовать с помощью HTML, CSS и JavaScript.

HTML

<a href="#" class="price__item">Item 1</a>
<a href="#" class="price__item">Item 2</a>
<a href="#" class="price__item">Item 3</a>
<a href="#" class="price__item">Item 4</a>
    

CSS

.price__item {
    transition: opacity 0.3s;
}

.price__item.dimmed {
    opacity: 0.5; /* Затемнение остальных элементов */
}
    

JavaScript

const items = document.querySelectorAll('.price__item');

items.forEach(item => {
    item.addEventListener('mouseenter', () => {
        items.forEach(el => {
            if (el !== item) {
                el.classList.add('dimmed');
            }
        });
    });

    item.addEventListener('mouseleave', () => {
        items.forEach(el => {
            el.classList.remove('dimmed');
        });
    });
});
    

Объяснение

1. HTML: Создаем несколько ссылок с классом price__item.
2. CSS: Определяем стиль для затемнения элементов при добавлении класса dimmed.
3. JavaScript:
   • Добавляем обработчик события mouseenter для каждого элемента, который затемняет другие элементы.
   • Добавляем обработчик события mouseleave, чтобы вернуть исходный стиль всем элементам, когда курсор уходит с элемента.

Этот код позволит вам затемнять все элементы, кроме того, на который наведён курсор.