div元素悬停时的CSS过渡

Question

我想改变div中一些文本在鼠标悬停时的不透明度:

目前我的过渡是这样的，它只是把盒子向上移动了一点:

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

在div。bg-onebyone中，我创建了另一个div，其中包含如下文本

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

我想做的是，当主div悬停在上面时，我想在过渡中增加上面的不透明度。我该怎么做呢?

<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

您需要在父元素上使用:hover伪类，然后选择子元素。

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

也.bg-onebyone .widget-stats .stats-icon是不正确的HTML标记，因为它的目标.stats-icon作为.bg-onebyone的孙子，不存在。

输出:

.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

通过JavaScript，使用jQuery .hover()和.css()，如下:

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