CSS。更改文字颜色

Question

所以，我有以下 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>

我附上一张图片来更好地描述情况。

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

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

当鼠标悬停在 title_container div 上时，颜色从黑色变为白色(好)。

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

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

这是我目前所拥有的:

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

谢谢!

Answer 1

当您将鼠标悬停在 a 标签上时，您需要更改 title_container 类中跨度的颜色。

将此添加到您的 CSS 中:

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

或 jsfiddle

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