Html 使用CSS更改悬停时的文本颜色

我已经搜索过了，但找不到与我遇到的问题相关的任何东西

我一直在努力解决这个问题，但似乎做不到。我有一个div，里面有文本和图像。当我将鼠标悬停在div中的任何位置时，我希望div中的所有文本和背景都改变颜色。我这样做是为了使底部的文本与背景颜色一起改变，但似乎无法使顶部的文本（h4）改变颜色

当我直接悬停在h4元素上时，它会改变颜色，但当我悬停在div中的任何位置时，它都不会改变颜色

下面的链接是我想要实现的一个粗略示例。h4标签的CSS上有单独的样式，所以不能像其他标签一样使其成为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来实现这一点？我对Web开发是新手，所以目前只知道一些HTML/CSS

谢谢

汤姆

您可以使用

#项目1 h4{
颜色：继承；
}

使其继承项目1的颜色

---

将CSS样式从

#project1 h4:hover {
    color: white;
}

到

---

您可以将

h4

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

#project1h4:将
悬停在
CSS
中

链接JSFIDLE时，必须在问题中包含一些代码。将URL格式化为代码是欺骗。
#project1:hover h4 {
    color: white;
}