Question

如何在父项上应用悬停时更改子元素？每当我将盒子悬停在图像上时，我想在盒子里面制作图标。我想保持这些相同的效果但是当我将鼠标悬停在盒子上时，一切都会受到影响。谢谢！

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如何在父项上应用悬停时更改子元素？每当我将盒子悬停在图像上时，我想在盒子里面制作图标。

＆＃34; icon＆＃34;的父母是跨度所以这个

.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

中简化了最终版本代码

如何在父项上应用悬停时更改子元素？

1 个答案: