Как при наведении на один объект запустить несколько Hover эффектов?

Question

[Оксана Щербакова]

Здравствуйте всем. Как прописать код так, чтоб выделенные элементы на картинке при наведении курсором мыши активировались одновременно.
https://codepen.io/shherbakowa-oxana/pen/MWgdbog?e...

Comments

[Модератор]

Для комментирования ответа жмите линк "Комментировать" под ответом
Не нужно писать комментарий в форме для ответа
Оповещения о такой реплике не поступит автору ответа

Не нужно засорять секцию ответов "спасибовсем", "решено" и тп

[Владимир Голубь]

Проблема решена ?

Answer 1

[salomatin]

Добавим всему элементу класс к примеру item, двум вложенным элементам (которые надо изменить) добавь класс к примеру item-content

В css сделай так
item:hover .item-content {
color: red;
}
Ну или задай другое значение, смотреть что за тип контента эти элементы. Может надо изменить background или т.п. В общем пропиши значение которое нужно сменить

https://jsfiddle.net/ybu7vo29/

Comments

[Оксана Щербакова]

Здравствуйте, да соглашусь вариант работает, но не так как мне нужно... У меня 1 элемент это иконка, она меняется при наведении за счет свойства background-image. А второй элемент меняется при наведении за счет свойства color. Не знаю как сделать так чтоб при наведении курсором мыши на одну из элементов они активировались одновременно.

[salomatin]

Ну так задайте им разные классы

item-content1
item-content2

И в css
item:hover .item-content1 {
color: red;
}

item:hover .item-content2 {
background : red;
}

[salomatin]

Оксана Щербакова, ну что вам помогло?

[Оксана Щербакова]

salomatin, ааааааа. Работает. Спасибо, спасибо)))))))

[salomatin]

Оксана Щербакова, пожалуйста выберите мой ответ верным

[Оксана Щербакова]

salomatin, Спасибо) Отметила)

[salomatin]

Оксана Щербакова, всегда пожалуйста)))

Answer 2

[Иван]

Scss

.some-block:hover {
background-color: red;

.another-block {
background-color: red;
    }
}

Comments

[Оксана Щербакова]

я не понимаю что вы написали(