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

【问题标题】：Different text-colors in one div need to change to one color when hovering over div将鼠标悬停在 div 上时，一个 div 中的不同文本颜色需要更改为一种颜色
【发布时间】：2011-07-30 09:27:30
【问题描述】：

我想用两种不同的颜色（黑色和红色）显示一行文本。当用户将鼠标悬停在文本所在的 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>

【问题讨论】：

标签： css html

【解决方案1】：

试试：

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

【讨论】：

不，这行不通；如果您的鼠标位于链接的非span 部分，则span 不会是白色的。
我目前正在使用手机，所以无法测试；但我不明白为什么它不起作用。 =/如果你已经测试过，它真的没有，那么我会很明显地删除它。让我知道..？

【解决方案2】：

建议使用 jQuery 的解决方案 $('.linkBackground').hover(function() { $(this).find('span').css('color', 'hexcode'); })

【讨论】：

这个解决方案不仅不起作用，而且在根本不需要它的地方使用 jQuery 是完全没有意义的，也是一个坏主意。 jQuery 被过度炒作和过度使用。
@Delan Azabani 不要责怪 jQuery....它太容易上瘾和有趣....责怪像我这样的糟糕的编码员 :)

【解决方案3】：

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

【讨论】：

谢谢，但不幸的是 !important 不起作用，我已经尝试过了。