0

a:before と a:hover を持つ 3 つの水平リストのリストがあります。ホバリングすると、要素はその位置に落ち着く前に少しジャンプします。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 - 予告編ボタン。私が間違っていなければ、サイトを初めてロードしたときにのみ発生します。

4

2 に答える 2

2

:beforeおよび:afterseclectorの固定幅を指定します。問題は、幅がブラウザによって計算されており、画像が読み込まれている間、画像に幅がないことです。

例えば：

.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;
}
于 2013-01-31T08:38:13.390 に答える
2

これはおそらく画像の読み込みによるものです。：hover画像が読み込まれるまで、しばらくの間消えます。幅と高さを設定すると、飛び回るのではなく、とりあえず消えてしまいます。

代わりに、それらをスプライトに配置して、画像の適切な部分に合うように位置を設定することができます。

于 2013-01-31T08:38:22.863 に答える