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

Question

我已经搜索过，但找不到与我遇到的这个问题有关的任何内容。

我已经尝试解决这个问题已有很长时间了，但似乎无法做到。我有一个div，其中包含文本和图像。当我将鼠标悬停在div中的任何位置时，我希望div中的所有文本和背景都改变颜色。我这样做的目的是使底部的文本以及背景颜色发生变化，但似乎无法使顶部的文本（h4）发生变化。

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

下面的链接是我要实现的粗略示例。h4标签的CSS上有单独的样式，因此无法像其他样式一样使用。这将是最简单的方法，但是不幸的是，他们必须保持与众不同。

这是我的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。

谢谢。

汤姆

JSFIDDLE链接

Answer 1

从更改CSS样式

#project1 h4:hover {
    color: white;
}

至

#project1:hover h4 {
    color: white;
}

JSFIDDLE演示

Answer 2

您可以使用

#project1 h4 {
    color: inherit;
}

使其继承#project1的颜色。

演示