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

Question

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

score 4 · Accepted Answer · answered Jan 14 '20 at 19:36

4

Try this syntax:

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

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

Hopefully it helps

answered Jan 14 '20 at 19:36

You Nguyen

9,961
4
26
52

score 0 · Answer 2 · answered Jan 14 '20 at 19:40

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

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

2 Answers2

Linked