CSS。更改文本颜色答案

【问题标题】：CSS. Change text colorCSS。更改文本颜色
【发布时间】：2015-05-26 07:47:12
【问题描述】：

所以，我有以下 html。

<div id="a" class="a_button">
    <a class="a_link" href="#"> 

        <div class="icon_container">
            <img class="icon_image" src="#">
        </div>

        <div class="title_container"> 
            <span class="title_inactive">               
            Title
            </span>
        </div>
    </a>    
</div>

我添加了一张图片来更好地描述这种情况。

因此，如您所见，此按钮由两个 divs 组成：icon_container 和 title_container。

鼠标悬停时，背景颜色按计划更改。现在，not-hover 上的title 的颜色是黑色的，当鼠标悬停时它应该变成white。

当鼠标悬停在title_container div 上时，颜色会从黑色变为白色（很好）。

但是，当鼠标悬停在icon_container 上时，文本的颜色不会变为白色，即使背景颜色发生了变化。

我怎样才能使鼠标悬停在icon_container上时，会导致title颜色发生变化？

这是我目前所拥有的：

https://jsfiddle.net/8wfhnupk/5/

谢谢！

【问题讨论】：

将您的代码连同您当前拥有的 CSS 添加到 codepen.io 或 jsfiddle.net。
嗨。我用 jsfiddle 编辑了这个问题。谢谢

标签： css

【解决方案1】：

当您将鼠标悬停在 a 标记时，您需要更改 title_container 类中 span 的颜色。

将此添加到您的 css 中：

a:hover .title_container span{
 color:#fff;   
}

或jsfiddle

.royal_button a:hover .royal_menu_title{
 color:#fff;   
}

【讨论】：

感谢 Teedejee！ =) 我明白为什么它不起作用！
@steveKim 很高兴我能帮助你理解这部分 css ;-) .

【解决方案2】：

将此添加到 CSS：

 .title_container > .title_inactive:hover{color:white}

【讨论】：

允许使用空格，当然它们是 2 个单独的类
谢谢！ =) 我想通了！ :)
@JamesKing 你说得对（我不知道为什么我认为它只是一个类）
=) 不用担心。我不够清楚。谢谢您的帮助！ :)

【解决方案3】：

您也可以使用它，

<style>

.icon_container:hover{
color:#000;
background-color:#fff;
}
.title_container:hover{
color:#FFF;
background-color:green;
}

</style>

【讨论】：

【解决方案4】：

这将是解决方案：

.royal_button:hover div {
    color:#fff;
}

JSFiddle

【讨论】：

【解决方案5】：

<div class="title_container" style="color:red"> 
            <span class="title inactive">               
            Title
            </span>
        </div>

通过应用如上所示的内联样式，文本颜色将会改变。

【讨论】：

内联样式总是一个坏主意
然后在样式中的 .title_inactive 类中添加,color:red。