悬停时缩放比例不缩放 [英] Transform Scale on hover not scaling

问题描述

当希望将 servNavItemWrap 悬停时， .servNavItemWrap img 可以转换比例.我现在正在做的事情行不通.

I want the .servNavItemWrap img to transform scale when servNavItemWrap is being hovered. What I am doing now it not working.

有人看到我在做什么错吗?

Does anyone see what I am doing wrong?

.servNavItemWrap {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  margin-bottom: 50px;
  text-align: center;
  cursor: pointer;
}

.servNavItemWrap img {
  width: 75px;
  height: 75px;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.servNavItemWrap:hover .servNavItemWrap img {
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<div class="servNavItemWrap">
  <a href="#">
    <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Dog-bite-prevention.jpg?itok=3N2KTNkP" alt="dog">
  </a>
</div>

推荐答案

您使用了错误的选择器...使用 .servNavItemWrap:hover img

You are using wrong selector...Use .servNavItemWrap:hover img

.servNavItemWrap:hover .servNavItemWrap img ....它将针对 .servNavItemWrap .servNavItemWrap

.servNavItemWrap:hover .servNavItemWrap img....it will target the img which is inside .servNavItemWrap .servNavItemWrap

.servNavItemWrap {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  margin-bottom: 50px;
  text-align: center;
  cursor: pointer;
}

.servNavItemWrap img {
  width: 75px;
  height: 75px;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.servNavItemWrap:hover img {
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<div class="servNavItemWrap">
  <a href="#">
    <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Dog-bite-prevention.jpg?itok=3N2KTNkP" alt="dog">
  </a>
</div>

这篇关于悬停时缩放比例不缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！