【JavaScript】マウスオーバーで要素の背景画像を変更する

本記事ではボタンやリンクをマウスオーバーした際に要素の背景画像を変更する方法をご紹介しています。

具体的には下記のデモの内容となります。「1～4」と表示されたリンクにマウスカーソルを載せるとセクションの背景に設定された画像が切り替わります。

DEMO

See the Pen gOMOqqG by ryohei (@intotheprogram) on CodePen.

実装方法は色々あると思いますが、本記事では「class属性」を使って背景画像の切り替えを実装しています。

上記の疑問にお答えできればと思います。

では解説していきます。

要素を作成する

はい、では早速作っていきましょう！

実装方法は幾通りもあるかと思いますが、本記事では「class属性」を使って背景画像の切り替えを行います。背景画像の枚数分だけ「class」を用意しておいて、スクリプトでの値をしゅっと切り替えるわけですね。

切り替える「class」は「data属性(カスタムデータ属性)」に持たせておきます。なぜ「data属性」を使うのか。それは単純に私が「data属性」が好きだからです！

考えるよりも手を動かす！　ということでまずは思い思いにHTMLを組んでみましょう。

HTML

<section id="app" class="bg1">
    <ul class="list">
        <li class="list-item" data-target="bg1">
            <a href="#">1</a>
        </li>
        <li class="list-item" data-target="bg2">
            <a href="#">2</a>
        </li>
        <li class="list-item" data-target="bg3">
            <a href="#">3</a>
        </li>
        <li class="list-item" data-target="bg4">
            <a href="#">4</a>
        </li>
    </ul>
</section>

実際にHTMLを見ていただくと何となく私のやりたいことが見えてきたのではないでしょうか。恐らくいま本記事を見てくれている方が考えている処理とほぼ同じ内容だと思います。

では続いてHTMLにスタイルを当てていきましょう！

スタイルを作成する

今回は「SCSS」でスタイルを作成していきたいと思います。冒頭で軽くお話しした通り、背景画像の数だけ「class」を用意します。繰り返し処理で済ませても良いですが、本記事ではわかりやすく一つ一つの「class」で用意することにします。

SCSS

#app {
    width: 100%;
    height: 100vh;
    background-color: #000000;
    background-position: center;
    background-size: cover;
    transition: background-image 0.3s;

    &.bg1 { background-image: url(../sample001.jpg); }
    &.bg2 { background-image: url(../sample002.jpg); }
    &.bg3 { background-image: url(../sample003.jpg); }
    &.bg4 { background-image: url(../sample004.jpg); }
}
.list {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    &-item {
        margin: 0 10px;
        a {
            display: block;
            padding: 25px;
            color: #555555;
            font-size: 2rem;
            text-decoration: none;
            transition: background-color 0.3s;
            background-color: rgba(255, 255, 255, 0.9);
            &:hover {
                background-color: rgba(0, 0, 0, 0.9);
            }
        }
    }
}

特にポイントらしいポイントはないですね……。リスト要素はコーディングされる方の環境で変わると思いますので、その辺は適宜調整していただければ！
ここまでくれば後はスクリプトを書くだけです。ラストスパートと行きましょう！

スクリプトを作成する

というわけでスクリプトを組んでみました！各行でやっている処理内容はコメントに記載を参考にしていただければ幸いです。

JavaScript

//リスト要素を取得する
const list = document.querySelector(".list");
//リスト要素の子要素（li）をすべて取得する
const listChildren = list.children;

//listChildrenの数だけ繰り返し処理を実行する
for (let item of listChildren) {
    item.addEventListener(
        "mouseover",
        function () {
            //リストアイテムのdata-targetを取得
            let target = item.dataset.target;
            //id="app"の要素を取得
            let el = document.getElementById("app");
            //id="app"のclassをクリア
            el.classList = "";
            //id="app"に上で取得したtargetをclass属性で追加
            el.classList.add(target);
        },
        false
    );
}

ここまでの内容をすべて組み合わせると冒頭のデモで紹介したマウスオーバーで背景画像が切り替わる処理が実現できているかと思います。やったけど動かないじゃん！という方。お手数ですが「CodePen」の中にあるソースを参考にしていただけると幸いです！

最後に

ここ半年ほどブログから離れて暮らしていましたが、半年経過してつくづく思うのは、知識をアウトプットすることの大切さです。文字にしたりアプリを作ったり、人によっては映像で残したり……とにかくアウトプットしないとせっかくインプットした知識が自分に定着しないんですよね。この事実を改めて痛感しました。

また、記事を更新しなくなった後も一日数千人の方がこのサイトを訪れてくれていました。ほとんどの方が検索から来てくださっているので、私のファンだよ！という方はいらっしゃらない思いますが……それでも本当に嬉しかったし、感謝しかありません。

これからも頑張って更新していくぞ！

と奮起した2020年10月8日でした。

大きく脱線してしまいましたが、以上、、JavaScriptで、マウスオーバーで要素の背景画像を変更する方法のご紹介でした！