CSS 在 div 悬停时过渡内部 div 元素

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 伪 class，然后在子元素上使用 select。

.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() and .css()，像这样：

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

CSS 在 div 悬停时过渡内部 div 元素

CSS transition inner div elements on div hover

css

css-transitions

css-animations