css - CSS - .id:hover a:before 项目跳来跳去

Question

我有一个包含 3 个水平列表的列表，其中包含 a:before 和 a:hover。悬停时，元素会在它固定在它的位置之前跳跃一点。尝试了 3 个流行的浏览器。任何修复的想法？

.twitter a:before{
content: url(.jpg);
padding-right: 10px;
position: relative;
bottom: -.4em;}

.twitter:hover a:before {
content: url(.jpg);
padding-right: 10px;
position: relative;
bottom: -.4em;}

http://nobodyfilm.org - 中间部分 twitter - facebook - 预告片按钮。如果我没记错的话，它只会在您第一次加载网站时发生。

Answer 1

:before为和选择器指定固定宽度:after。问题是浏览器正在计算宽度，并且在加载图像时，它们没有宽度。

例如：

.twitter a:before {
    content: url(.jpg);
    padding-right: 10px;
    position: relative;
    bottom: -.4em;
    float: left;
    display: block;
    width: 30px;
}

.twitter:hover a:before {
    content: url(.jpg);
    padding-right: 10px;
    position: relative;
    bottom: -.4em;
    float: left;
    display: block;
    width: 30px;
}

Answer 2

这可能是由于加载图像。它会消失片刻，直到加载 :hover 图像。如果你设置它的宽高，它应该不会跳来跳去，只是暂时消失。

相反，您可以将它们放在精灵中，然后将位置设置为适合图像的右侧部分。