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的不存在的子孙。

<强>输出：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

通过JavaScript，使用jQuery .hover()和.css()，如下所示：

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

div转移内部div元素div div

2 个答案: