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 LINK

Answer 1

从

更改CSS样式

#project1 h4:hover {
    color: white;
}

要

#project1:hover h4 {
    color: white;
}

JSFIDDLE DEMO

Answer 2

您可以使用

#project1 h4 {
    color: inherit;
}

使其继承#project1的颜色。

Demo

Answer 3

您可以在p标记中嵌套h4标记。 #project1 h4:hover中无需CSS。

Demo Fiddle

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

3 个答案: