CODEWITHSUNDEEP
css
Shane
Shane

Reputation: 542

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

Upvotes: 2

Views: 1078

Answers (2)

darkhouse
darkhouse

Reputation: 205

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

Upvotes: 0

Tu Nguyen
Tu Nguyen

Reputation: 10179

Try this syntax:

.outer:hover .inner {
  color: red;
}
<div class="outer">
  <span class="inner">Lorem</span>
</div>

Hopefully it helps

Upvotes: 5

Related Questions