CSS transition inner div elements on div hover

Question

I want to change the opacity of some text in my div when hover over happens :

currently my transition looks like this, and it just moved the box up a bit:

.bg-onebyone {
    transition: all 0.5s ease;
    background: #17B6A4 none repeat scroll 0% 0% !important;
}

.bg-onebyone:hover {
    margin-top: -8px;
}

In my div.bg-onebyone I have another div holding some text like this

.bg-onebyone .widget-stats .stats-icon {
    color: #FFF;
    opacity: 0.5;
}

And what I want to do is just when the main div is hovered over I want to also increased the above opacity in the transition. How can I do this ?

<a href="/url">
    <div class="widget widget-stats bg-onebyone">
        <div class="stats-icon stats-icon-lg">
            <i class="fa fa-search fa-fw"></i>
        </div>
        <div class="stats-desc">Creating Grouped Unmatched Aliases</div>
    </div>
</a>

Answer 1

You need to use the :hover pseudo-class on parent and then select the child element.

.bg-onebyone:hover .stats-icon {
  opacity: 0.8;
}

Also .bg-onebyone .widget-stats .stats-icon is incorrect for your HTML markup since it targets .stats-icon as a grand-child of .bg-onebyone which does not exist.

Output:

 .bg-onebyone { width: 300px; height: 100px; transition: all 0.5s ease; background: #17B6A4 none repeat scroll 0% 0% !important; } .bg-onebyone:hover { margin-top: -8px; } .bg-onebyone .stats-icon { color: #FFF; opacity: 0.5; } .bg-onebyone:hover .stats-icon { opacity: 0.8; } 

 <div class="widget widget-stats bg-onebyone"> <div class="stats-icon stats-icon-lg">Test text for opacity <i class="fa fa-search fa-fw"></i> </div> <div class="stats-desc">Creating Grouped Unmatched Aliases</div> </div> 

Answer 2

Via JavaScript, use jQuery .hover() and .css() , like this:

$( "mainDiv" ).hover(
      function() {
          $("whereToChangeTheOpacity").css( "opacity", "0.5" );
      },
      function() {
          $("whereToChangeTheOpacity").css( "opacity", "0" );      
      }
);