使用 CSS 更改父级悬停时的子级文本颜色

Question

我有一个 div，里面有文本和图像。我希望当我将鼠标悬停在 div 内的任何位置时，div 内的所有文本和背景都会改变颜色。我已经做到了底部的文本与背景颜色一起改变，但似乎无法让顶部的文本（h4）改变颜色。

当我直接将鼠标悬停在 h4 元素上时，它会改变颜色，但当我将鼠标悬停在 div 内的任何位置时，它不会改变颜色。

下面的链接是我想要实现的目标的一个粗略示例。

<h4>

标签的 CSS 上有单独的样式，因此不能像其他标签那样将其设为

<p>

。

.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;
}

<div class="container">
    <a href="PP 20062014 Creating This Website.html">
        <div id="project1">
            <h4>This Website</h4>
            <img src="https://www.google.com/images/srpr/logo11w.png" width="50%"</img><p></p>
                <p>My first ever website</p>
        </div>
    </a>
</div>

有什么方法可以使用 CSS 来做到这一点吗？

JSFIDDLE 链接

Answer 1

从

更改 CSS 样式

#project1 h4:hover {
    color: white;
}

至

#project1:hover h4 {
    color: white;
}

JSFIDDLE 演示

Answer 2

你可以使用

#project1 h4 {
    color: inherit;
}

使其继承

#project1

的颜色。

演示

Answer 3

您可以将

h4

标签嵌套在 p 标签中。 不需要

#project1 h4:hover

中的

CSS

。

演示小提琴