将鼠标悬停在包含图标的 div 上时更改图标的颜色

Question

将鼠标悬停在换行div 上时，如何反转图标 fa fa-clipboard 的颜色？

<div class="col-lg-6 mbr-col-md-10">
<div class="wrap">
<div class="ico-wrap">
<span class="mbr-iconfont fa fa-clipboard"></span>
</div>
</div>
</div>

当我将鼠标悬停在图标本身上时，这将反转剪贴板图标的颜色，但是当将鼠标悬停在其上方的div 上时，我需要它反转。默认颜色为黑色。

.mbr-iconfont:hover {
color: white !important;
}

Answer 1

试试这个语法：

.outer:hover .inner {
color: red;
}

<div class="outer">
<span class="inner">Lorem</span>
</div>

希望它有所帮助

Answer 2

.ico-wrap:hover .mbr-iconfont {
color: white !important;
}
.ico-wrap {
border: 1px solid black;
width: 100px;
}

<div class="col-lg-6 mbr-col-md-10">
<div class="wrap">
<div class="ico-wrap">
<span class="mbr-iconfont fa fa-clipboard"> text here </span>
</div>
</div>
</div>