Javascriptを使わないロールオーバーのやり方

CSSのみでロールオーバーの指定をしたいとき、皆さんはどのような方法を使われていますか？

・a:hoverで画像を入れ替える
（ボタン画像を背景に指定し、文字をインデントで飛ばしている時）
・a:hoverでボタン部分の背景をnoneにして、さらに後ろにある背景を表示させる
・通常時とhover時用の画像を一枚の画像にまとめて背景に指定し、a:hover時に背景画像を移動させる

などなど。

いろいろとやり方はあるかと思いますが、皆さんがどのようにされているか教えていただけるとうれしいです。

よろしくお願いします。

No.3 回答者： metametamu 回答日時： 2009/11/14 07:37

基本はjavascriptでやるべきだと思っていますが、どうしてもCSSという条件でなら今ならlist-item-imageじゃないですかね。

text-indentを使わない分弱点が少ないです。
ただしIE6とモダンブラウザのみで、IE5.5以下は切り捨てになります。

<a href="#">
<span>あああ</span>
</a>

a{
width:120px;
height:50px;
overflow:hidden;
}

a span {
display:list-item;
list-style:none url(link.gif) inside;
}

a:hover span{
list-style-image:url(hover.gif);
}

haslayoutがらみでもう少しなにかやらないといけなかった気がしますが・・・

ずっと前に作ったやつなのでよく覚えてないですが↓みたいな方法もあります。

<p class="RollOver"><a href="#"><img src="link.gif"></a></p>

/* RollOver -- IE4~ MacIE5.1~ NN6.2~ FF1~ OP7~ SF1~ */

.rollOver {
display:table;}

.rollOver a {
display:table-cell !important;
display:inline-block;
text-decoration:none;
background:url(hover.gif) transparent 0 0;}

.rollOver a img {
position:relative;}

.rollOver a:hover {
background-position: 0% 0%;}

.rollOver a:hover img {
z-index:-1;}

/* RollOver End */

この回答へのお礼

基本はjavascriptでやるべき

なのですね。
CSSでやったほうがいい、と勘違い？していました。

大変参考になりました。
ありがとうございました。

お礼日時：2009/12/02 13:16

No.2 回答者： taloo 回答日時： 2009/11/13 14:53

どこからどこまでがアンカーとして有効なのかわかるように、hover指定はしてほしいですね。

colorでもbackgroundでも、borderでもtext-decorationでもいいですし。
linkさえ指定なしにしてもらえると、ブラウザの設定の色が反映されるのでいいのですが。

クリックの代わりとしてmouseover/hoverを使うのは、わたしも好ましいとは思いません。


> いろいろとやり方はあるかと思いますが、皆さんがどのようにされているか教えていただけるとうれしいです。

ネットワークリソース、ファイルサイズの節約の意味も込めて、
JavaScript/CSSいずれも、画像をひとまとめにする方法にするようにしています。
（画像の作り方や作成手間の関係で変わります。）

> （ボタン画像を背景に指定し、文字をインデントで飛ばしている時）
この方法はCSSオン、画像オフの場合に文字が表示されなくなりますから、好ましくないと思います。

この回答へのお礼

大変おそくなりました。
とても参考になりました。
ありがとうございました。

お礼日時：2009/12/02 13:15

No.1 回答者： yyr446 回答日時： 2009/11/13 13:35

ちなみに私はホバーは嫌いです。

きっちりとクリックして欲しいです。
マウスを動かすだけでベロベロ変わるのは嫌いです。
こんな人もたくさんいるのをお忘れなく

この回答へのお礼

ご意見ありがとうございました★

お礼日時：2009/11/16 01:08