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

Полный рабочий пример, который можно вставить в один HTML-файл. Этот код затемняет все элементы с классом price__item, кроме того, на который наведён курсор, создавая эффект визуального выделения активного элемента.

Код

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Затемнение при наведении</title>
    <style>
        .price__item {
            display: block;
            padding: 15px;
            margin: 10px 0;
            background-color: #f0f0f0;
            text-align: center;
            text-decoration: none;
            color: #000;
            border-radius: 5px;
            transition: opacity 0.3s;
        }

        .price__item.dimmed {
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <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>

    <script>
        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');
                });
            });
        });
    </script>
</body>
</html>

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

Стоимость услуг по разработке и сопровождению сайтов на 1C-Битрикс

Разработка корпоративного сайта

от 7 дней

Лендинг

от 3 дней

Техническая поддержка

выполняется с сайтами на основе любых CMS