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

質問

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

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

などなど。

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

よろしくお願いします。

回答No.3

metametamu

基本は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でやったほうがいい、と勘違い？していました。

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

回答No.2

神崎 渉瑠（@taloo）

どこからどこまでがアンカーとして有効なのかわかるように、hover指定はしてほしいですね。
colorでもbackgroundでも、borderでもtext-decorationでもいいですし。
linkさえ指定なしにしてもらえると、ブラウザの設定の色が反映されるのでいいのですが。

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

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

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

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

お礼

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

回答No.1

yyr446

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

お礼

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