Можно ли без Js сделать все остальные ссылки серыми при наведении на одну из них?

Ссылка скопирована
CSS HTML JavaScript
1 ответ

https://codepen.io/accountnujen/pen/PoXbpWN
snippet

Я дошёл только до такого варианта и разумеется меня он не устраивает. Мне нужно все остальные ссылки делать серыми, а не последующие. Вариант с тем, чтобы выдать color при наведении на .menu тоже не подходит, потому что серым ссылки становятся слишком рано из-за отступов самого menu. Мне нужно именно при наведении на одну ссылку делать другие серыми

Дополнительно:

.menu:hover {} li:hover {}

.menu:hover {} li:hover {}

Вы где-то потеряли ссылки

  • Ankhena,

    Вариант с тем, чтобы выдать color при наведении на .menu тоже не подходит, потому что серым ссылки становятся слишком рано из-за отступов самого menu.

  • accountnujen, ну что делать, пишите js

    Можно, конечно, подкладывать псевдо с pointer-events, но это изврат.
    Либо перевесить отступы на родителя. Но останутся отступы между элементами.

    P.s. И да, gap тепрь пишется так. Без всяких grid

    • Ответы:

    Можно
    https://codepen.io/xdevelx/pen/rNoWmWX
    snippet
    если устраивает поддержка браузеров :has

    Только почему меню без ссылок, зачем ему фиксированная ширина и grid-gap не во всех браузерах для display flex будет работать (для flex используйте gap). И зачем justify-content: space-between и gap одновременно?

    Вариант без :has по мотивам коммента Ankhena
    https://codepen.io/xdevelx/pen/dywOWJW
    snippet
    Но в этом варианте, если навести курсор между пунктами меню, у всех пунктов цвет станет серым. А это косяк, хоть и небольшой.

    • если устраивает поддержка браузеров :has

      очень скудная поддержка...

      Вариант без :has по мотивам коммента Ankhena

      увы

      Вариант с тем, чтобы выдать color при наведении на .menu тоже не подходит, потому что серым ссылки становятся слишком рано из-за отступов самого menu.

    • accountnujen, очевидно, что второй вариант рабочий. Цвет меняется на отступах, цвет меняется слишком рано? Переработайте отступы так, чтоб пустого места не оставалось, блин.
    • Aetae,

      блин.

      по бокам мне куда отступ девать? юзверь держит мышку между пунктов - всё серое, редкие покалывания в конечностях, шум в ушах, головокружение - где я?

    • accountnujen, да, признаю, был не прав, не до конца продумал.
      Но можно сделать так: snippet
      Немного магическая штука, которая нарушит поток событий для .menu, но зато без js.:)
    • accountnujen, нормальная поддержка. Только огнелис не умеет.
      А учитывая, что функциональности никакой эта причуда не несет, то можно пойти по пути graceful degradation и пользователей лисы оставить без данного эффекта. И не усложнять себе жизнь.
    • Aetae, выведи в отдельный ответ. я выберу решением
    • Сергей delphinpro, категорически не согласен. Ты такими советами возвращаешь эру IE, только теперь с chrome в главные роли. Лису надо поддерживать всеми способами, а не топить.:(

      P.S. Кстати, ИМХО, :has это последний гвоздь в крышку гроба производительности css. Теперь нам точно нужны полноценные дебагеры и профайлеры для css, с разворачиванием стекртейсов и прочим счастьем... =

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Никита Орлов Ответ

    Да, можно сделать все остальные ссылки серыми при наведении на одну из них без использования JavaScript. Это можно сделать с помощью CSS псевдо-класса :hover.

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

    Пример кода на HTML и CSS:

     
 
 
 
 
<title>Gray Out Links on Hover</title>
 
a {
  color: blue; /* Цвет обычных ссылок */
  text-decoration: none; /* Убираем подчеркивание */
}
 
a:hover {
  color: gray; /* Цвет ссылки при наведении */
}
 
a:hover ~ a {
  color: gray; /* Все остальные ссылки становятся серыми при наведении на одну из них */
}
 
 
 
  <a href="#">Ссылка 1</a>
  <a href="#">Ссылка 2</a>
  <a href="#">Ссылка 3</a>
  <a href="#">Ссылка 4</a>

    <title>Gray Out Links on Hover</title> a { color: blue; /* Цвет обычных ссылок */ text-decoration: none; /* Убираем подчеркивание */ } a:hover { color: gray; /* Цвет ссылки при наведении */ } a:hover ~ a { color: gray; /* Все остальные ссылки становятся серыми при наведении на одну из них */ } <a href="#">Ссылка 1</a> <a href="#">Ссылка 2</a> <a href="#">Ссылка 3</a> <a href="#">Ссылка 4</a>

    В данном коде мы задали цвет обычных ссылок, цвет при наведении и добавили стиль для всех остальных ссылок при наведении на одну из них с использованием селектора ~ (смежный селектор).

    Теперь при наведении на любую ссылку на странице, все остальные ссылки будут становиться серыми. Надеюсь, это поможет в решении вашей проблемы!

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов 1С-Битрикс Можно ли быстро сделать зеркало сайта на связке Битрикс+Аспро с другими настройками? 0 ответов