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

Question

当悬停在 wrap 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>

希望对你有帮助