Как можно изменить цвет всех остальных ссылок на серый при наведении курсора на одну из них, если использование JavaScript недопустимо?

  • 5 сентября 2023 г. 18:26
Ответы на вопрос 2
Если использование JavaScript недопустимо, можно воспользоваться псевдоклассом `:focus-within` для изменения цвета всех остальных ссылок при наведении курсора на одну из них. Вот пример решения:

```css
.menu:focus-within .link:not(:focus) {
  color: gray;
}
```

```html
<div class="menu">
  <a class="link" href="#">Ссылка 1</a>
  <a class="link" href="#">Ссылка 2</a>
  <a class="link" href="#">Ссылка 3</a>
</div>
```

В данном случае, при наведении на одну из ссылок внутри `.menu`, эта ссылка получает фокус, а все остальные ссылки внутри `.menu` становятся серыми.
Если вас устраивает, вот переформулированные советы:

- Вам можно воспользоваться этим решением на CodePen, если оно вам подходит. [Ссылка на CodePen](https://codepen.io/xdevelx/pen/rNoWmWX).
- Проверьте поддержку браузеров для использования псевдо-класса `:has`.
- Обратите внимание, что меню не содержит ссылок, это может быть нужно для определённого дизайна.
- При использовании `display: flex`, обратите внимание, что фиксированная ширина для меню может быть ненужной, так как содержимое меню может изменяться.
- При использовании `display: flex`, замените `grid-gap` на `gap` для обеспечения совместимости с более старыми браузерами.
- Использование одновременно `justify-content: space-between` и `gap` может привести к излишнему отступу между элементами меню.
Похожие вопросы