Change color of icon when hovering over div in which it is contained

问题

How can I invert the color of the icon fa fa-clipboard when hovering over the wrap div?

<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>

This will invert the color of the clipboard icon when I hover over the icon itself, but I need it to invert when hovering over the div above it. The default color is black.

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

回答1:

Try this syntax:

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

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

Hopefully it helps

回答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>

来源：https://stackoverflow.com/questions/59740562/change-color-of-icon-when-hovering-over-div-in-which-it-is-contained