使用CSS更改悬停时的文本颜色 [英] Changing text color on hover using CSS

问题描述

我已经搜索过，但找不到与我遇到的这个问题有关的任何东西.

I've searched but couldn't find anything relating to this problem I'm having.

很长一段时间以来，我一直在努力解决这个问题，但似乎无法做到.我有一个div，其中包含文本和图像.当我将鼠标悬停在div中的任何位置时，我希望div中的所有文本和背景都改变颜色.我这样做的目的是使底部的文本以及背景颜色发生变化，但似乎无法使顶部的文本(h4)发生变化.

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.

当我将鼠标悬停在h4元素上方时，它会改变颜色，而当我将其悬停在div中的任何位置时，颜色不会改变.

It changes color when I hover directly over the h4 element but not when I hover anywhere within the div.

下面的链接是我要实现的目标的粗略示例. h4标签的CSS上有单独的样式，因此不能像其他样式一样将其设为p.这将是最简单的方法，但是不幸的是，他们必须保持与众不同.

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.

这是我的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.

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.

谢谢.

汤姆

JSFIDDLE链接

推荐答案

从

#project1 h4:hover {
    color: white;
}

收件人

#project1:hover h4 {
    color: white;
}

JSFIDDLE演示

这篇关于使用CSS更改悬停时的文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！