返回

鼠标hover的抖动问题如何解决？

前端

在实践中遇到的一个问题，就是在鼠标hover时，如果将原来的字体变大，或者变粗之后，会增加宽度，导致所在区域整体抖动，给人一种很不好的体验。针对这个问题，做了一些尝试。主要是不想用定位之类的，就想着是通过微调元素的宽度，来实现hover后的平滑过渡。

1. 使用transition

使用transition属性可以实现平滑的过渡效果。以下是一个示例：

.element {
  transition: width 0.2s ease-in-out;
}

.element:hover {
  width: 120px;
}

在上面的示例中，当鼠标悬停在.element元素上时，元素的宽度将从100px平滑过渡到120px。

2. 使用animation

使用animation属性也可以实现平滑的过渡效果。以下是一个示例：

.element {
  animation: width-change 0.2s ease-in-out;
}

@keyframes width-change {
  from {
    width: 100px;
  }

  to {
    width: 120px;
  }
}

在上面的示例中，当鼠标悬停在.element元素上时，元素的宽度将从100px平滑过渡到120px。

3. 隐藏溢出

如果不想让元素的宽度发生变化，可以隐藏元素的溢出。以下是一个示例：

.element {
  overflow: hidden;
}

.element:hover {
  font-size: 1.2em;
  font-weight: bold;
}

在上面的示例中，当鼠标悬停在.element元素上时，元素的字体大小和粗细会发生变化，但是元素的宽度不会发生变化。

4. 使用伪类

可以使用伪类来实现平滑的过渡效果。以下是一个示例：

.element {
  width: 100px;
}

.element:hover:before {
  content: "";
  width: 120px;
  height: 100%;
  background-color: #f00;
  transition: width 0.2s ease-in-out;
}

.element:hover {
  width: 100px;
}

在上面的示例中，当鼠标悬停在.element元素上时，元素的宽度不会发生变化，但是元素的::before伪元素的宽度将从100px平滑过渡到120px。

以上是解决不定宽横向列表hover后抖动问题的一些方法。希望这些方法能够帮助你解决这个问题。