Question

我有一个列表3的水平列表，其中：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 - 中段推特 - 脸书 - 拖车按钮。它只会在您第一次加载网站时发生，如果我没有弄错的话。

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图像加载。如果你设置它的宽度和高度，它不应该四处跳跃，只是暂时消失。

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

CSS - .id：在项目跳转之前悬停a：

2 个答案: