2

Как сделать так, чтобы при наведении на одну из ссылок в навбаре она оставалась прежнего цвета, а остальные ссылки затемнялись?

Пример: введите сюда описание изображения

введите сюда описание изображения

Код навбара:

    <header>
        <img src="assets/logo.svg" alt="logo" class="logo">
        <nav>
            <ul class="nav_links">
                <li><a href="#">Home</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
    </header>
li, a, button {
    font-family: Josefin Sans;
    font-weight: normal;
    font-size: 15px;
    letter-spacing: 0.31em;
    color: #DEDEDE;
    text-decoration: none;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 5%;
    height: 20px;
    border-bottom: 1px solid #21223F;
}

.logo {
    cursor: pointer;
    width: 160px;
}

.nav_links {
    list-style: none;
}

.nav_links li {
    display: inline-block;
    padding: 8px 70px;
    transition: 0.3s;
}

.nav_links a {
    transition: 0.3s;
}

1 ответ 1

4

Для реализации описанного поведения, достаточно задействовать псевдокласс :not() :

li, a, button {
  font-family: normal 15px 'Josefin Sans';
  letter-spacing: 0.31em;
  text-decoration: none;
  color: #DEDEDE;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 5%;
  border-bottom: 1px solid #21223F;
  background-color: #141529;
}

.logo {
  width: 160px;
  cursor: pointer;
}

nav { flex: 1; }

.nav_links {
  list-style: none;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  pointer-events: none;
}

.nav_links li {
  width: min-content;
  pointer-events: auto;
  transition: 0.3s;
}

.nav_links a { transition: 0.3s; }
.nav_links:hover li:not(:hover) a { opacity: .3; }
<header>
  <img src="assets/logo.svg" alt="logo" class="logo">
  <nav>
    <ul class="nav_links">
      <li><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">About&nbsp;Us</a></li>
    </ul>
  </nav>
</header>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.