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>

我要包含一张图片来更好地描述情况。

因此，正如您所看到的，此按钮由两个divs组成：icon_container和title_container。

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

当鼠标悬停在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;   
}

Answer 2

将此添加到CSS：

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

Answer 3

或者你可以使用它，

<style>

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

</style>

Answer 4

这将是解决方案：

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

JSFiddle

Answer 5

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

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