XTHML CSSのロールオーバーについて

質問

現在CSSにてロールオーバー方法についてどちらを選択する方が正しいでしょうか？

通常は一般的な一枚の画像を用意して上下に重ねあわせてhover時に下へ移動させる方法。

＜画像名：gazo.jpg サイズ：200x300 ID:menu>とします。

もう１つは 予め<div id="menu"></div>で枠を設定しておき
本来のjavascript通り2枚の画像を上下に組み合わせることなく実現する方法。

#menu {
height: 300px;
width: 200px;
float: left;
}
#merchandise a{
float: left;
height: 300px;
width: 200px;
margin-top: 0px;
background-image: url(images/gazo.jpg);
background-repeat: no-repeat;
}
#merchandise a:hover{
float: left;
height: 300px;
width: 200px;
margin-top: 0px;
background-image: url(images/gazo-f2.jpg);
background-repeat: no-repeat;
}

前者の方はWeb上にいくつか出回っておりますが、後者の方は偶然発見しました。やはり前者の方が手間がかからなくて良いでしょうか？
あなたならどっちでしょうか？

回答No.1

steel_gray · ベストアンサー

2枚を結合した画像というのはコンテンツの提供手段としてあまり望ましくないような気がしますのでどちらがより正しいかといったら後者…かな。
後者にしてもbackgroundとしているのでCSSが効かないケースでの表示状態によってはよろしくない手段なのかもしれませんが。
実は従来のJavasacriptを使った方法のほうがよりvalidにできる気もします。（これも造り次第ですが。）

お礼

どうも有難う御座いました。
ご参考にさせて頂きます。