Question

我想将图像添加到每个li，但我想只在鼠标悬停时显示它。但是，我想避免“移动”效果，这是添加到DOM的新元素（图像）的结果。我尝试用visibility:hidden修复它，因为这需要空间，但没有运气。

这是一个简单的例子，正如您所看到的，在悬停这些li时，它们正在向右移动。

实现这一目标的最简单方法是什么？

Answer 1

您希望绝对定位:before伪元素以防止它在显示时进入布局流，或者在:hover处独立于opacity状态创建伪元素为0，并在悬停时将opacity设置为1.

保持:before不受布局流程影响

ul > li:hover:before {
   /* all the other styles */
   position: absolute;
   left: 25px;
}

创建:before，无论:hover州

ul > li:before {
   /* all the other styles */
   display: inline-block;
   float: left;
   opacity: 0;
}

ul > li:hover:before {
   opacity: 1;
}