当将鼠标悬停在div上时，一个div中的不同文本颜色需要更改为一种颜色

Question

我想显示一行有两种不同颜色（黑色和红色）的文字。 当用户将鼠标悬停在文本所在的div上时，div的背景颜色会发生变化，div中的所有文本都必须变为白色。

使用'span'元素可以很好地解决在一行上显示不同颜色的问题。 但是，当我将鼠标悬停在div上时，'span'元素中的文本保持红色，而其他文本确实变为白色。

那么如何确保所有文本都变为白色？ 感谢所有帮助。

这是我的CSS：

.linkBackground
{        
    background-color: White;
    border-bottom: 1px solid #a22a29;        
    color: Black;
}

.linkBackground span
{
    color: #a22a29;
}

.linkBackground:hover
{
    background-color: #a22a29;
    border-bottom: 1px solid White;
    color: White;
}

这是我的HTML：

<div class="linkBackground">
    This is <span>an example</span>
</div>

Answer 1

尝试：

.linkBackground:hover,
.linkBackground:hover span {
    color: #fff;
}

Answer 2

使用jQuery $（'。link Background'）建议解决方案.hover（function（）{$（this）.find（'span'）。css（'color'，'hex code'）;}）

Answer 3

.linkBackground:hover {
    background-color: #a22a29;
    border-bottom: 1px solid White;
    color: white !important;
}