悬停父元素时如何更改子元素的不透明度

Question

当父div悬停时，我想更改子div图像的不透明度。如何在CSS中做到这一点？

<div class="parent">
    <div class="child">
        <img src="" alt="" height="" width="">
    </div>
</div>

Answer 1

使用:hover-selector并更改img opacity：

.child:hover img {
    opacity: 0.8;
}

或者，如果您想更改while子div的不透明度，则：

.parent:hover .child {
    opacity: 0.8;
}

Answer 2

样本小提琴链接-JsFiddle

.parent {
  width: 300px;
  height: 300px;
  background: red
}
.child {
  width: 100px;
  height: 100px;
  background: green
}
.parent:hover .child {
  opacity: .5
}

Answer 3

您可以执行以下操作：

.parent {
    background: red;
    padding: 30px;
}

.parent:hover .child {
   opacity: 0.3
}

.child {
    background: blue;
    padding: 30px;
}

<div class="parent">
    <div class="child">
        <img src="" alt="" height="" width="">
    </div>
</div>