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

Question

[Alekosh Akhosh]

Возникла затруднения с hover'ом, по макету нужно, чтобы при наведении на карточку изменялись все карточки, кроме той, на которую наведён курсор.
Долго думал, пытался как-то через псевдокласс :not, либо приходили мысли делать через JavaScript, но есть сомнения что излишне.

Answer 1

[Михаил Р.]

1. Hover на всего родителя > все дети чёрного цвета.
2. Hover на ребёнка и он оранжевого цвета, за счёт специфичности он перебьет п1.

Comments

[szQocks]

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

[Aetae]

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

[Михаил Р.]

szQocks

тут без js не обойтись

ну разумеется, обновил ответ

[Alekosh Akhosh]

Aetae, Блин, я знал что это просто, но никудышная моя голова просто не мог додуматься до такого. Благодарствую!

[Alekosh Akhosh]

Михаил Р., И вам большое спасибо, выручили что гора с плеч упало. Спасибо за ценный урок!

[szQocks]

Aetae, Михаил Р. у одного решение в 2 ховера, у другого решение в отключение ховера у .item у которого даже нет ховера, т.к ховер у контейнера, оба варианта за пониманием логики, но всё же у михаила вариант с перебиванием стилей ( как то укладывается всё же в голове но сам факт что 2 ховера... такое себе хм хм ), наверное поэтому я подумал что нельзя через css, а так в целом обоим респект за примеры, буду знать что и такое можно

[Михаил Р.]

szQocks,

но сам факт что 2 ховера... такое себе хм хм

Если выбирать или (как в примере) или (тащить js), то вариант оптимально решает задачу

[szQocks]

Михаил Р., согласен