ポインタを合わせると…

質問

ポインタを合わせると色や画像が変わるボタンやリンクをたまに見ます。
現在スタイルシートを使っていますが、どうすれば同じようなことができるのでしょうか？どなたか教えていただけると幸いです。よろしくお願いします。

回答No.3

partita

スタイルシートでもボタン可変できますよ。

<a href="index.html">リンク</a>として
スタイルシートで

a {
display:block;
text-indent:-9999px;
width:100px;
height:20px;
background:url(aaa.gif);
}
a:hover {
background:url(bbb.gif);
}

マウスアウトでaaa.gif、マウスオーバーでbbb.gifになります。a {cursor:default;}も利用すれば、応用がありそうです。

最近はCSSのみでマウスオーバー処理を作成してくれるソフトも出ていますし、おそらくこれから主流になると思います。

ただし、スワップイメージのことをご質問されているのならば、Javascriptを使用するのが良いでしょう。

回答No.2

koutarou504

とりあえずリンクだけならスタイルシートでも、
A:hover{background-color:#ffccff;}
の様な擬似セレクタで指定できます。
残念ながら主流の IE が A くらいでしか対応しないので
ボタンの可変をスタイルシートだけで実現するのはまだ無理かと・・・。
ただリンクであれば一部のバージョンに対するデザインを諦めたりすれば、
A{display:block;background-color:#ffffcc;width:5em;}
などとすればボタンもどきも作れます。
罫線の配色などによっては立体感も・・・。
（上記は例示です。実際にはクラスかＩＤなどのセレクタも合わせて用いて対象を限定する事をお勧めします。）

どうしてもリンク以外をという場合は、onmouseover , onmouseout （JavaScript）にて処理を記述します。
対象とする環境によりいろいろな記述の仕方がありますのでご注意を。

<img src="a.bmp" onmouseover="this.src='b.bmp'" onmouseout="this.src='a.bmp'">
(各ファイル名は適切に書き換える。)
最低限これでも動作すると思う・・・けど。
汎用性がどれだけあるか不明なのと、本当はこの様な記述は関数にして外部ファイルに纏めるのが望ましいです。

回答No.1

akanekor

スタイルシートだけだと無理です。
javascript のonmouseout,onmouseover命令使います。

検索すれば腐るほどサンプル出てきます。
まあ、とりあえず、参考
http://www.seo-equation.com/html/log/onmouseout.html