Как изменить цвет нескольких элементов при наведении на один из них

Question

подскажите пожалуйста. Есть меню, нужно чтобы при наведении на один из пунктов меню, все остальные становились серого цвета, а тот на который навели остался черного. И так со всеми пунктами. по примеру работы меню на этом сайте https://agence-belle-epoque.fr/en

Я уже много чего пробовал, наверное только js сделает, я понял что нужно добавить класс всем элементам, но я не знаю как не добавлять класс именно наведенному элементу.

const menubergericon = document.querySelector('li');
if (menubergericon) {
   
    menubergericon.addEventListener('mouseover', function (e) {
        menubergericon.classList.toggle('menucolor');
        
    });
}

.menucolor  {
  color: #a8a8a8;
  font-size: 30px;
  transition: all 1s;
}
li {
  list-style-type: none;
}

a {
  color:#000000;
  font-size: 20px;
  text-decoration: none;
}

            <nav class="navmenu__navigation">
                <ul>
                    <li class="navmenu__li"><a href="" class="navmenu__link about-link" id="about">ОБО МНЕ</a></li>
                    <li class="navmenu__li"><a href="" class="navmenu__link portfolio" id="portfolio">ПОРТФОЛИО</a></li>
                    <li class="navmenu__li"><a href="" class="navmenu__link" id="skill">МОИ СКИЛЛЫ</a></li>
                    <li class="navmenu__li"><a href="" class="navmenu__link">УСЛУГИ</a></li>
                    <li class="navmenu__li"><a href="" class="navmenu__link">СВЯЗЬ СО МНОЙ</a></li>
                </ul>
            </nav>

Answer 1

const navMenu = document.querySelector('.navmenu__navigation');
const menuBergerIcon = document.querySelectorAll('.navmenu__link');
navMenu.addEventListener('mouseover', (e) => {
    if (e.target.closest('.navmenu__link')) {
        for (elem of menuBergerIcon) {
            elem == e.target ? elem.style.color = 'black' : elem.style.color = 'grey';
        }
    } else {
        for (elem of menuBergerIcon) {
            elem.style.color = 'black';
        }
    }
})

*, *::before, *::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
ul,ol,li {
    list-style: none;
}
    
.navmenu__link {
    color: #000;
    font-size: 20px;
    text-decoration: none;
    transition: all .3s;
}

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
    <nav class="navmenu__navigation">
        <ul>
            <li class="navmenu__li"><a href="" class="navmenu__link about-link" id="about">ОБО МНЕ</a></li>
            <li class="navmenu__li"><a href="" class="navmenu__link portfolio" id="portfolio">ПОРТФОЛИО</a></li>
            <li class="navmenu__li"><a href="" class="navmenu__link" id="skill">МОИ СКИЛЛЫ</a></li>
            <li class="navmenu__li"><a href="" class="navmenu__link">УСЛУГИ</a></li>
            <li class="navmenu__li"><a href="" class="navmenu__link">СВЯЗЬ СО МНОЙ</a></li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>
</html>

Answer 2

В данном случае, достаточно лишь CSS - просто используйте псевдокласс :not() :

ul {
  list-style-type: none;
  width: max-content;
  padding: 0;
  pointer-events: none;
}

li {
  width: min-content;
  color: #aaa;
  pointer-events: auto;
}

a {
  font: bold 30px/1em serif;
  text-decoration: none;
  white-space: nowrap;
  color: #000;
  transition: all 0.5s;
}

ul:hover li:not(:hover) a {
  color: #ccc;
}

<nav class="navmenu__navigation">
  <ul>
    <li class="navmenu__li"><a href="" class="navmenu__link about-link" id="about">ОБО МНЕ</a></li>
    <li class="navmenu__li"><a href="" class="navmenu__link portfolio" id="portfolio">ПОРТФОЛИО</a></li>
    <li class="navmenu__li"><a href="" class="navmenu__link" id="skill">МОИ СКИЛЛЫ</a></li>
    <li class="navmenu__li"><a href="" class="navmenu__link">УСЛУГИ</a></li>
    <li class="navmenu__li"><a href="" class="navmenu__link">СВЯЗЬ СО МНОЙ</a></li>
  </ul>
</nav>

БЛОГ НА HUSL

Как изменить цвет нескольких элементов при наведении на один из них

Ответы (2 шт):