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

こんにちは、Ryohei（@ityryohei）です！

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

具体的には下記のデモの内容となります。「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

    );

}