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

【问题标题】：Change color of icon when hovering over div in which it is contained将鼠标悬停在包含图标的 div 上时更改图标的颜色
【发布时间】：2020-01-14 19:31:48
【问题描述】：

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

【问题讨论】：

标签： css

【解决方案1】：

试试这个语法：

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

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

希望对你有帮助

【讨论】：

【解决方案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>

【讨论】：