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

Question

[accountnujen]

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


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

Comments

[Ankhena]

.menu:hover {}
li:hover {}

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

[accountnujen]

Ankhena,

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

[Ankhena]

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

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

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

Answer 1

[xdevelx]

Можно
https://codepen.io/xdevelx/pen/rNoWmWX

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

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

Вариант без :has по мотивам коммента Ankhena
https://codepen.io/xdevelx/pen/dywOWJW

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

Comments

[accountnujen]

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

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

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

увы

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

[Aetae]

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

[accountnujen]

Aetae,

блин.

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

[Aetae]

accountnujen, да, признаю, был не прав, не до конца продумал.
Но можно сделать так:
Немного магическая штука, которая нарушит поток событий для .menu, но зато без js.:)

[Сергей delphinpro]

accountnujen, нормальная поддержка. Только огнелис не умеет.
А учитывая, что функциональности никакой эта причуда не несет, то можно пойти по пути graceful degradation и пользователей лисы оставить без данного эффекта. И не усложнять себе жизнь.

[accountnujen]

Aetae, выведи в отдельный ответ. я выберу решением

[Aetae]

Сергей delphinpro, категорически не согласен. Ты такими советами возвращаешь эру IE, только теперь с chrome в главные роли. Лису надо поддерживать всеми способами, а не топить.:(

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