使用 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。

Thanks.

Tom

JSFiddle 链接 http://jsfiddle.net/MNc3P/

更改您的 CSS 样式

#project1 h4:hover {
    color: white;
}

To

#project1:hover h4 {
    color: white;
}

JSFiddle演示 http://jsfiddle.net/MNc3P/2/