Блог

Я искал, но не смог найти ничего, относящегося к этой проблеме, с которой я столкнулся.

Я уже целую вечность пытаюсь разобраться с этим, но, похоже, не могу этого сделать. У меня есть div, в котором есть текст и изображение. Я хочу, чтобы весь текст и фон внутри div меняли цвет при наведении курсора в любом месте div. Я сделал так, чтобы текст внизу менялся вместе с цветом фона, но, похоже, не удается изменить цвет верхнего текста (h4).

Он меняет цвет, когда я навожу курсор непосредственно на элемент h4, но не при наведении курсора в любом месте div.

Приведенная ниже ссылка является грубым примером того, чего я хочу достичь. В CSS тега h4 есть отдельный стиль, поэтому я не могу сделать его p, как остальные. Это был бы самый простой способ сделать это, но, к сожалению, они должны оставаться разными.

Это мой стиль CSS

 .container {
    text-align: center;
}

.container h4 {
    text-align: center;
    color: black;
}

#project1 {
    text-align: center;
    color: white;
    background-color: white;
    background-color: rgba(255,255,255,0.9);
    color: black;
}

#project1:hover {
    background-color: blue;
    color: white;
}

#project1 h4:hover {
    color: white;
}

#project1 h4 {
    text-transform: uppercase;
}

a {
    text-decoration: none;
}
  

Есть ли какой-нибудь способ сделать это с помощью CSS, а не jquery / javascript? Я новичок в веб-разработке, поэтому в настоящее время знаю только некоторые HTML / CSS.

Спасибо.

Том

JSFIDDLE ССЫЛКА

Измените свой стиль CSS с

 #project1 h4:hover {
    color: white;
}
  

Для

 #project1:hover h4 {
    color: white;
}
  

ДЕМОНСТРАЦИЯ JSFIDDLE

Вы можете использовать

 #project1 h4 {
    color: inherit;
}
  

чтобы он наследовал #project1 цвет.

ДЕМОНСТРАЦИЯ

Вы можете вложить h4 тег в тег p. нет необходимости в #project1 h4:hover in CSS .

Демонстрационная скрипка