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

Question

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

我一直在尝试解决这个问题，但似乎做不到。我有一个包含文本和图像的div。当我在div内任何位置悬停时，我希望div内的所有文本和背景都改变颜色。我已经使底部的文本和背景颜色改变，但似乎无法使顶部的文本（h4）改变颜色。

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

下面的链接是我想要实现的大致示例。CSS中h4标签有单独的样式，因此不能像其他文本一样将其变成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。

谢谢。

Tom

JSFIDDLE LINK

- tomjoweb

---

当您链接jsfiddle时，必须在问题中包含一些代码。将URL格式化为代码是不允许的。 - Oriol

Answer 1

改变你的CSS样式从

#project1 h4:hover {
    color: white;
}

To

#project1:hover h4 {
    color: white;
}

JSFIDDLE DEMO

- Coder

Answer 2

您可以使用

#project1 h4 {
    color: inherit;
}

使其继承#project1的颜色。

演示

- Oriol

---

这不会改变文本的颜色。 - Adan Vivero

Answer 3

你可以在p标签中嵌套h4标签。 CSS中不需要使用#project1 h4:hover。

演示Fiddle

- netfreak30