div悬停时CSS转换内部div元素

当鼠标悬停在上方时，我想更改div中某些文本的不透明度：

目前，我的转换看起来是这样的，它只是将框向上移动了一点：

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

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

在我的div.bg-one-by-one中，我有另一个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>

---

您需要使用

：将

伪类悬停在父元素上，然后选择子元素

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

另外，

.bg onebyone.widget stats.stats icon

对于HTML标记不正确，因为它将

.stats icon

作为不存在的

.bg onebyone

的后代

输出：

.bg一个接一个{
宽度：300px；
高度：100px；
过渡：所有0.5s缓解；
背景：#17B6A4无重复滚动0%0%！重要；
}
.bg一个接一个：悬停{
利润上限：-8px；
}
.bg一个接一个.stats图标{
颜色：#FFF；
不透明度：0.5；
}
.bg逐个：悬停.stats图标{
不透明度：0.8；
}

测试文本的不透明度
创建分组的不匹配别名

通过JavaScript，使用jQuery，如下所示：

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

---

请发布一些HTML。在上面发布了整个div，基本上我想在div悬停时创建一个过渡，以增加“stats icon”上的不透明度。没问题：）请检查CSS选择器页面：您当前使用的CSS选择器。stats icon不正确。