Как при наведении на блок, поменять цвет текста вложенных элементов на чистом CSS?

Question

Всем привет!

Необходимо сделать так, чтобы при наведении на блок менялся цвет одновременно в заголовке, тексте и псевдоэлементе. Всегда подобные вещи делала на LESS, сейчас необходимо сделать на чистом CSS.

Как записать правильно на чистом CSS?

На LESS писала, например, так:

.overview-card-item {
            margin-right: 40px; 
            width: 18%;
            display: inline-block;
            box-sizing: border-box;
            text-align: center;
            cursor: pointer;

            &:hover {
                h4 {
                    color: red;
                }

                p {
                    color: red;
                }
            }

Вот пример кода, в котором необходимо сделать изменения:

Пример кода на JSFiddle

Answer 1

.overview-card-item {
    margin-right: 40px; 
    width: 18%;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
}

.overview-card-item:hover h4 {
    color: red;
}

.overview-card-item:hover p {
    color: red;
}

А для примера с jsfiddle так (остальные по аналогии):

.about-for-web-design .wrapper .cards .card:hover .card-title {
    color: red;
}

И результат работы LESS легко понять, если постоянно смотреть CSS в который он превращается. Будет полезно для полного понимания что на самом деле пишете.

Answer 2

Хм, что-то я не понял сложности, ну вот так, если я вас верно понял

.overview-card-item:hover h4 {
  color: red
}

.overview-card-item:hover p {
  color: red
}

БЛОГ НА HUSL

Как при наведении на блок, поменять цвет текста вложенных элементов на чистом CSS?

Ответы (2 шт):