css - 悬停时更改大小 : ugly flicker/"shaking" effect

Question

我想在鼠标悬停时更改 HTML 元素的大小。它一般有效。但是，至少在 Firefox 中，当鼠标正好位于 DIV 的底部边缘时，它会产生丑陋的闪烁效果:即使鼠标根本没有移动，浏览器也会继续调整大小。我能做些什么吗？

.my-hover-square {
  width: 240px;
  height: 240px;
  
  position: absolute;
  display: -webkit-inline-box;
  -webkit-transition: height 1s;
  /* Safari */
  transition: height 1s;
  -webkit-transition: width 1s;
  /* Safari */
  transition: width 1s;
  
  background: pink;
}

.my-hover-square:hover {
  width: 450px;
  height: 200px;
}

<div class="my-hover-square"></div>

Answer 1

你的第二个转换覆盖了第一个

你需要将它们结合起来:

transition: 高度1s，宽度1s;

.my-hover-square {
  width: 240px;
  height: 240px;
  transition: height 1s, width 1s;
  background: pink;
}

.my-hover-square:hover {
  width: 450px;
  height: 200px;
}

<div class="my-hover-square"></div>