При наведении на блок должно менять цвет содержимого. Как реализовать?

Question

[Serejka]

В тренировочном макете 4 карточки. Изначатьно, фон белый и текст с svg иконкой серый. При наведении фон должен стать голубым а содержимое(текст и svg иконка) белым.
50% работы я сделал. Фон при наведении меняется на голубой. Но текст и иконка серые.

https://codepen.io/dusiv_2004/pen/jOzLJpO

Comments

[Вадим]

Ничего не мешает Вам сделать и вторые 50%.

Задали Вы цвет текста карточки при наведении на карточку, дальше что?
Почему не поменялся цвет других тегов с текстом внутри карточки? Что говорят инструменты разработчика?

[Serejka]

Вадим, да я задавал свойство на смену текста при hover. А в инструментах разработчика не показывает код с псевдоклассом hover

[Сергей delphinpro]

Ser4_War,

А в инструментах разработчика не показывает код с псевдоклассом hover

Посмотреть можно

[alexalexes]

Есть такой инструмент для активации состояний псевдо классов:

[Вадим]

Ser4_War, правой кнопкой по элементу в разметке можно активировать состояния ховера, фокуса и тд.

[Serejka]

Сергей delphinpro, спасибо. В инструмента все нормально. И я обратил внимание на другое. Изначальные стили я задавал не блоку, а тексту.
А надо было блоку. Теперь цвет меняется. А svg так и остались серыми. А нужен белый.

[Сергей delphinpro]

Ser4_War, svg нужно встраивать прямо в разметку, а не тегом img, тогда можно будет менять цвета его элементов.

[Serejka]

Сергей delphinpro, а можете рассказать как?

[Сергей delphinpro]

Ser4_War, svg это текстовый файл.
Откройте в редакторе, скопируйте содержимое, и вставьте в нужное место в html
Свойства там другие

{
  fill: red; // Закраска
  stroke: blue; // Цвет обводки.
}

[Serejka]

Сергей delphinpro, об этих свойствах я сегодня читал. Но как присоеденить иконку не вставля в img тег?

[Сергей delphinpro]

Ser4_War, я же написал выше как это сделать

[Сергей delphinpro]

Ser4_War,

Answer 1

[Сергей delphinpro]

.services-card:hover .card__title { color: red; }
.services-card:hover .card__text { color: green; }