悬停时改变大小：丑陋的闪烁/＆＃34;摇晃＆＃34;影响

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的第二次转换将覆盖第一次

你需要将它们结合起来：

transition: height 1s, width 1s;

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

.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; 
*/
  transition: width 1s, height 1s;
  -webkit-transition: width 1s, height 1s;
  
  background: pink;
}

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

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

如果你写transition: height 1s;并写transition: width 1s;，那就重复了。 因此只有transition: width 1s;可以有效。

如果要将多个属性与transition一起使用，

你应该像这样使用transition: width 1s, height 1s, ...;

Answer 3

你可以包装它：

＆＃13;

＆＃13;

.hover-container {
  min-width: 240px;
  height: 240px;
}

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

对我来说，它很吓人，因为你正在改变div的高度，这会使它远离鼠标指针，这会移除：hover伪类，这会导致div调整大小，从而将其移回鼠标指针，它添加了：hover伪类。冲洗并重复。我认为不可能保持调整大小而不是使用纯css发生这种情况。

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

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