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

Question

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

多年来我一直在努力解决这个问题，但似乎做不到。我有一个包含文本和图像的 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。

谢谢。

汤姆

JSFIDDLE LINK

Answer 1

改变你的CSS样式

#project1 h4:hover {
    color: white;
}

到

#project1:hover h4 {
    color: white;
}

JSFIDDLE DEMO