html - :hover width transition glitching

Question

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

谢谢。

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

Answer 1

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

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

看看this codepen