hover疑似クラスで(マウスが載った際に)リンク画像を切り替える - スタイルシートTipsふぁくとりー

《2016年2月3日 16:07 公開/更新》 hover疑似クラスで(マウスが載った際に)リンク画像を切り替える [イメージ,リンク,配置] 画像リンク(＝リンクになっている画像)の上にマウスポインタを載せたときに、マウスポインタが載っている間だけ別の画像に差し替えるデザインがよくあります。そのような「マウスが載ったときに画像を切り替える」機能は、JavaScriptなどのスクリプトを活用することなく、スタイルシートだけで作れます。 「要素の上にマウスポインタが載ったとき」の装飾は、hover疑似クラスを使うことで指定できます。つまり、hover疑似クラスを使って画像を切り替えれば良いわけです。ただ、表示する画像ファイルそのものを切り替えるよりも、背景画像の表示領域をずらすことで「画像が切り替わったような効果を出す」テクニックの方が、(切り替え先の画像の読み込みを待たずに済む分)動作が高

[kai3desu]

なるほどマウスオーバーでの画像切替えはこうやるのね

[katsuren]

onMouse の画像を切り替えたいならスタイルシートでこんな感じにすると速いらしい。