cssでロールオーバー設定した画像がoperaでは最初のロールオーバーでは非表示になります

質問

いつもお世話になっております。
以下の様にcssを組みました。
〔ｃｓｓ〕
@charset "UTF-8";
#bnn0513 span {
display:none;
}
#bnn0513 a {
display:block;
width:212px;
height:102px;
padding:0;
background-image:url(images/sample.gif);
background-repeat:no-repeat 0 0;
}
#bnn0513 a:link {
background-image:url(images/sample.gif);
background-repeat:no-repeat 0 0;
}
#bnn0513 a:visited {
background-image:url(images/sample.gif);
background-repeat:no-repeat 0 0;
}
#bnn0513 a:hover {
background-image:url(images/sample_ov.gif);
background-repeat:no-repeat 0 0;
}
#bnn1 a:active {
background-image:url(images/sample_on.gif);
background-repeat:no-repeat 0 0;
}
〔xhtml（一部）〕
<div id="bnn0513">
<a href="sample.html"><span>サンプル</span></a></div>
CSSでロールオーバー設定した画像が、他のブラウザではきちんと表示されるのですが、operaブラウザでは一度目にカーソルをロールオーバー指定した場所に置くと、hover用の画像が表示されず、sample.gifの画像も消えてしまいます。
一旦カーソルを移動させて再び戻すとhover用の画像は表示されます。
一度目にカーソルを置いたときもキチンと表示される様にしたいのですが、どうすればよろしいでしょうか？
java等他のプログラミングが入っても構いませんので方法をご教授ください。
宜しくお願い致します。

回答No.1

abril · ベストアンサー

サンプル画像で検証しました。確かにOpera9.61では初回のa:hoverの際にsample_ov.gifがうまく読み込まれない様です。
UA側の仕様だと思いますので、これを回避するには、コンテンツを表示する際に予めJavaScriptでsample_ov.gifをプリロードしておくか、画像置換の方法をちょっと変える、といった対策があるかと思います。

前者は「JavaScript　画像　プリロード」などのキーワードでググるとサンプルがわんさか出てきますので、後者の方法のみ。
これもよく見られるCSSによる画像置換の手法なのですが、offとonの画像を2つに繋げて一つの背景画像として読み込み、a:hoverの時にはbackground-positionプロパティで背景画像の描画開始位置をずらす事でロールオーバー効果を出す、というものです。
つまり、現在使用されているsample.gif（W212px×H102px）とsample_ov.gif（同サイズ）を縦に二つ繋げて、W212px×H204pxの一枚の画像にします。これを仮にsample2.gifとします。

ちなみに、今回の件には影響してませんが、CSSにちょっと間違いや無駄がありますので先にその点を。

#bnn0513 a {
（省略）
background-repeat:no-repeat 0 0;←"0 0"の値はbackground-repeatのものではなく、background-positionのものです。削除して下さい（以下全ての疑似クラスでも同様）
}
#bnn0513 a:link {
（省略）
background-repeat:no-repeat;←この指定は#bnn0513 aのセレクタで既に指定されているので省略できます。（以下全ての疑似クラスで同様）
}

以上を含めた修正版です。
---------------------------------------------------------------------
（省略）
#bnn0513 a {
display: block;
width: 212px;
height: 102px;
padding: 0;
background: url(images/sample2.gif) no-repeat;
}
#bnn0513 a:link {
background-position: 0 0;
}
#bnn0513 a:visited {
background-position: 0 0;
}
#bnn0513 a:hover {
background-position: 0 -102px;
}
（省略）
---------------------------------------------------------------------
※#bnn0513 a:linkと#bnn0513 a:visitedの指定はディフォルト値なので省略してもかまいません。a:hoverとの対比が分かり易い様に明示しただけです。

なお、本件の場合はa:active時の画像も変えられている様ですので、正確にはsample_on.gifも更に付け足したW212px×H306pxの画像が必要になると思います。その場合は、上記のa:hoverと同様の考え方で、上記画像を作った上で、
#bnn0513 a:active {
background-position: 0 -204px;
}
と指定すればよろしいかと。

不具合ありましたら補足して下さい。

お礼

abril 様
お返事が遅れてすいません。

ご指摘ありがとうございます。
現在他の人が作ったCSSを修正している為、ポジションの記述の場所を勘違いしてしまいました。
"background-repeat:no-repeat 0 0;"の部分、修正致しました。

CSSでa:active時のボタンの見た目を変更できる方法が自分ではみつけられませんでしたが、abril 様の回答内容を読ませていただき、「その手があった！」とハッとさせられました。
ご提案、どうも有難うございました。