:hover 宽度过渡毛刺

【问题标题】：:hover width transition glitching:hover 宽度过渡毛刺
【发布时间】：2020-03-09 15:08:07
【问题描述】：

我试图在将鼠标悬停在元素上时更改其宽度。它似乎可以工作，但只要我将鼠标悬停在元素上，它就会一直转换，从而导致类似故障的循环。我怎样才能使过渡只发生一次？

谢谢。

html:

<div>
  <div>
   <img id="img" src="#"/>
  </div>
</div>

css：

#img { 
  width: 326px;
  height: 326px; 
  -webkit-transition: width 0.4s, height 0.4s; 
  transition: width 0.4s, height 0.4s;
}

#img:hover { 
  width: 0px; 
  height: 326px; 
}

【问题讨论】：

标签： html css hover width transition

【解决方案1】：

在修改了一段时间后，我意识到随着图像变小到width: 0，您的光标最终会离开图像，导致悬停状态不再有效。这会使图像回到全宽，直到它再次碰到您的光标并尝试变小。这将无限进行。

假设您的图像保持在326px，我对其进行了一些编辑以使父级大小相同，并且在父级悬停时，它将使子级变小。这将使悬停区域保持相同大小，从而不会导致故障。

看看this codepen

【讨论】：