使用 CSS 更改懸停時的文本顏色

Question

我已經搜索過，但找不到與我遇到的這個問題相關的任何內容。

我多年來一直試圖解決這個問題，但似乎無法做到。 我有一個 div，其中包含文本和圖像。 當我將鼠標懸停在 div 內的任何位置時，我希望 div 內的所有文本和背景都改變顏色。 我已經這樣做了，以便底部的文本與背景顏色一起更改，但似乎無法讓頂部文本 (h4) 更改顏色。

當我直接將鼠標懸停在 h4 元素上時它會改變顏色，但當我將鼠標懸停在 div 內的任何地方時它不會改變顏色。

下面的鏈接是我想要實現的粗略示例。 h4 標簽的 CSS 有單獨的樣式，所以不能像其他標簽一樣使它成為 ap。 這將是最簡單的方法，但不幸的是，它們必須保持不同。

這是我的 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的顏色。

演示

Answer 3

您可以在 p 標簽中嵌套h4標簽。 不需要#project1 h4:hover在CSS 。

演示小提琴