CSSの:hoverを使ってマウスオーバー時に表示を切り替える方法

画像の上にポインタが来た時に、画像を変化させる表現をロールオーバーと言います。

ロールオーバーの実装方法はいくつかありますが、CSSの:hoverを使う基礎的な方法をご紹介します。

:hoverを使ってマウスオーバー時に表示を切り替える方法

基本的なマウスオーバー

マウスオーバー時に画像の表示を切り替える基本的な方法としては、２種類の画像を用意し、ポインタがふれてる時とそうでない時で画像を切り替える方法です。今回は画像のような２種類の画像を用意しました。

Aの画像にポインタが触れたらBの画像に切り替わります。触れると画像の色が薄くなるようなデザインです。

手順としては、HTMLに１枚目の通常の画像を指定し、CSSでマウスオーバー時の画像を設定していきます。

HTML

<p class="sample">
   <a href="#">
        <img src="Aの画像のURL" width="80" height="80" alt="" />
    </a>
</p>

CSS

.sample{
    background: url(Bの画像のURL) no-repeat;
    width: 80px;
    height: 80px;
　　　　　　　　border-style:none;
}
.sample a{
    display: block;
}

.sample a:hover img{
    visibility: hidden;
}

マウスオーバーが手軽に自由に使えると、webサイトでの表現の幅も広がりますよね。ぜひ取り入れてみてください。