鼠标之前的伪元素预留空间

Question

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

下面是一个简单的例子，你可以看到，在盘旋这些li的时候，它们正在向右移动。

实现此目的最简单的方法是什么？

http://jsfiddle.net/UQAjh/

Answer 1

你想要任一位置所示，当伪:before绝对元件，以防止它进入布局流动，或在为0的opacity从:hover状态独立地创建伪元件并设置opacity到1时徘徊。

保持:before向外布局的流动

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

小提琴：http://jsfiddle.net/marionebl/UQAjh/1/

创建:before不管:hover状态

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

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

小提琴：http://jsfiddle.net/marionebl/Nda6Z/1/