悬停时变换比例而不是缩放

【问题标题】：Transform Scale on hover not scaling悬停时变换比例而不是缩放
【发布时间】：2018-08-30 20:33:52
【问题描述】：

我希望.servNavItemWrap img 在悬停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 .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>

【问题讨论】：

标签： css css-transitions transform

【解决方案1】：

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

.servNavItemWrap:hover .servNavItemWrap img....它将针对img，它位于.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>

【讨论】：

感谢您的帮助！