ミギムキ

[CSS] javascriptを使わずにロールオーバーで画像を切り替えたい

公開日:2018/08/27 更新日:2019/07/30

やりたいこと

リンクボタンの画像切り替えをできるだけ単純にやりたい
javascript/jQueryなしCSSだけで切り替える

サンプルコード

html

<a href="#" class="rollover">
    <img src="btn_off.jpg" alt="">
    <img src="btn_on.jpg" alt="">
</a>

CSS

.rollover {
    display: block;
    position: relative;
}
.rollover > img:nth-child(2) {
    position: absolute;
    top: 0px;
    left: 0px;
    visibility: hidden;
}
.rollover:hover > img:nth-child(2) {
    visibility: visible;
}

仕組み、解説、補足など

同じ座標にオンとオフ両方の画像を配置（オンの画像を絶対位置で座標合わせ）
マウスオーバーの有無でオンの画像のvisibilityを切り替える

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。