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

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

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

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

基本的なマウスオーバー

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

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

70アートボード 1

手順としては、HTMLに1枚目の通常の画像を指定し、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サイトでの表現の幅も広がりますよね。ぜひ取り入れてみてください。


イベント