0

画像のロールオーバー効果 (CSS と JavaScript の両方) を作成するための代替方法を検討しました。その過程で、ある特定の CSS メソッドを使用して、説明のつかない動作に遭遇しました。

.main-banner a#link1{
    background-image: url(images/yellow-button_03.png);
    background-repeat: no-repeat;   
    width:310px;
    height:85px;
    top:190.2px;
    left:277px;
} 

.main-banner a:hover#link1{

    background-image: url(images/yellow-button-bright_03.png);
    background-repeat: no-repeat;

}

このメソッドは、背景画像付きのホットスポットを作成します。マウスオーバーすると、画像はまったく同じサイズの別の色のボタンに置​​き換えられます。

最初のマウスオーバーでは、ロールオーバー イメージが初めて初期化されるため、非常にわずかなちらつきがあります。このイベントは、スタイルシートの最初のキャッシュの後にのみ発生します。

私の質問は次のとおりです。

CSS が完全に読み込まれているのに、なぜこの動作が発生するのでしょうか?

css バックグラウンド ロールオーバー イメージが最初のマウス オーバー イベントまでロードされないことを示しますか? しかし、そうではありません。

ロールオーバー機能を複製するための代替ソリューションを提供しないでください。これは問題ではありません。

最初のロールオーバー時にわずかなちらつきが発生する理由を理解したいだけです。ありがとう。

4

2 に答える 2

1 
.main-banner a#link1:hover{

    background-image: url(images/yellow-button-bright_03.png) no-repeat;

}

通常、セレクターの後に記述される疑似クラスa or a#link1はセレクターなので、次のように記述する必要がありますa#link1:hover

これをチェックアウトhttp://jsfiddle.net/d5RpE/1/

@Tuanderful - まさにこの状態で「画像スプライト」を使用できるため、初めて :​​hover イベントが発生したときに画像が変動しません

于 2012-08-28T13:30:49.213 に答える
0

CSS は完全にロードされていますが、CSS で参照されているすべての要素が必要になるまでロードされているとは思いません。言い換えれば、yellow-button_03.pngページが最初に読み込まれたときにリンクをレンダリングするために読み込まれますが、リンクのyellow-button-bright_03.png上にカーソルを置いた後にのみ読み込まれると思います。

于 2012-08-28T13:47:05.260 に答える