当悬停在父元素上时，如何使子元素发生变化？

Question

当悬停在父元素上时，如何让子元素发生变化？每当我将框悬停在图像上时，我想让框内的图标缩放。我想保留这些相同的效果，但是当我将鼠标悬停在框上时，一切都会受到影响。谢谢！

.box {
  display: inline-block !important;
  position: relative !important;
  overflow: hidden;
  background-color: rgba(50, 58, 70, .3);

}
.box-overlay {
  position: absolute;
  transition: background 0.2s ease, padding 0.8s linear;
  background-color: rgba(50, 58, 70, .6);
  width: 100%;
  height: 100%;
}
.box-overlay > span {
 display: none; 
 
}
.box-overlay:hover  > span {
 display: inline; 
 
}
.box a:hover .box-overlay {
  display: inline;
  text-align: center;
  position: absolute;
  transition: background 0.2s ease, padding 0.8s linear;
  background-color: rgba(50, 58, 70, .3);
  color: #fff;
  width: 100%;
  height: 100%;
}

.box-overlay span {
 transition: all 0.3s ease-in-out;
}
.box-overlay span {
  position: relative;
  top: 38%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.go img{
 -webkit-transition: all .3s ease; /* Safari and Chrome */
    -moz-transition: all .3s ease; /* Firefox */
    -ms-transition: all .3s ease; /* IE 9 */
    -o-transition: all .3s ease; /* Opera */
    transition: all .3s ease;
}
.go img:hover {
  -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

<div class="box">
  <a href="#">
        <div class="box-overlay">
          <span class="go">
   <img src="img/go.svg" width="50px" height="50px">
    </span>
        </div>
    <img src="img/aa-family-car.jpg" alt="" height="300" width="300" class="responsive">
  </a>
</div>

Answer 1

How can I make the child element change when hover is applied on the parent ? I want to make the icon inside the box scale whenever I hover the box with the image.

"icon" 的父级是跨度，所以这个

.go img:hover {
     -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

应该是这个

.go:hover img {
     -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

如果您的意思是当您将鼠标悬停在整个事物上时图标应该缩放，那么

.box:hover .go img {
         -webkit-transform:scale(1.25); /* Safari and Chrome */
        -moz-transform:scale(1.25); /* Firefox */
        -ms-transform:scale(1.25); /* IE 9 */
        -o-transform:scale(1.25); /* Opera */
         transform:scale(1.25);
    }

我在这个JSFiddle Demo

中稍微简化了最终版本的代码

当悬停在父元素上时，如何使子元素发生变化？

How can I make the child element change when hover is applied on the parent?

html

css

parent-child

hover