Html 使用 CSS 更改悬停时的文本颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24342262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing text color on hover using CSS
提问by tomjoweb
I've searched but couldn't find anything relating to this problem I'm having.
我已经搜索过，但找不到与我遇到的这个问题相关的任何内容。
I have been trying to work this out for ages now but can't seem to do it. I have a div which has text and an image in it. I want all text and background within the div to change color when I hover anywhere within the div. I have made it so that the text at the bottom changes, along with the background color, but can't seem to get the top text (h4) to change color.
我多年来一直试图解决这个问题，但似乎无法做到。我有一个 div，其中包含文本和图像。当我将鼠标悬停在 div 内的任何位置时，我希望 div 内的所有文本和背景都改变颜色。我已经这样做了，以便底部的文本与背景颜色一起更改，但似乎无法让顶部文本 (h4) 更改颜色。
It changes color when I hover directly over the h4 element but not when I hover anywhere within the div.
当我直接将鼠标悬停在 h4 元素上时它会改变颜色，但当我将鼠标悬停在 div 内的任何位置时它不会改变颜色。
The link below is a rough example of what I want to achieve. There is seperate styling on the CSS of the h4 tag so can't make it a p like the rest. That would be the easiest way to do this but unfortunately they must stay different.
下面的链接是我想要实现的粗略示例。h4 标签的 CSS 有单独的样式，所以不能像其他标签一样使它成为 ap。这将是最简单的方法，但不幸的是，它们必须保持不同。
This is my CSS style
这是我的 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;
}
Is there any way to do this using CSS and not jquery/javascript? I'm new to Web Development so only know some HTML/CSS at present.
有没有办法使用 CSS 而不是 jquery/javascript 来做到这一点？我是 Web 开发的新手，所以目前只知道一些 HTML/CSS。
Thanks.
谢谢。
Tom
汤姆
回答by Shiju K Babu
Change your CSS style from
更改您的 CSS 样式
#project1 h4:hover {
color: white;
}
To
到
#project1:hover h4 {
color: white;
}
回答by Oriol
回答by Darshana Ahalpara
You can nest h4tag in p tag.
no need for #project1 h4:hoverin CSS.
您可以h4在 p 标签中嵌套标签。不需要#project1 h4:hoverin CSS。
