@bukimalposted at 2024-10-03

カーソルが重なっている要素によって、背景画像を変えたい。

Q&A

Closed

解決したいこと

html/cssを勉強している者です。

マウスカーソルが重なっている要素によって、
背景画像の差し替えをしたいです。

/*ここからCSS*/
body{
    background-image: url(画像1);
}

<!--ここからhtml-->
<body>
    <ol>
    <li class="image2">画像2に差し替え</li>
    <li class="image3">画像3に差し替え<li>
    </ol>
</body>

例えば上のコードで言えば
サイトで表示される最初の背景画像に画像1を設定し、
image2クラスが設定されているliタグにカーソルが重なったら、
背景画像が画像2に切り替わり、
image3クラスが設定されているliタグにカーソルが重なったら、
背景画像が画像3に切り替わるような
コードが書きたいです。

自分で試したこと

/*これはCSSです*/
.image2:hover{
    background-image: url(画像2);
}

として解決を図りましたが、
bodyではなく、liの設定になるので上手にできませんでした。
よろしくお願いします。

3Answer

@YottyPG posted at 2024-10-03

@SurferOnWww さんの言う通り、JavaScriptで動的に切り替えるのがわかりやすくていいと思います。

CSSだけで対応するなら、親要素:has(子要素:hover)で実装できると思います。

See the Pen Untitled by yotty (@yotty) on CodePen.

参考：

4Like

Comments

@YottyPG

image3クラスが設定されているliタグにカーソルが重なったら、
背景画像が画像3に切り替わる

一度カーソルが重なって背景画像が切り替わり、カーソルが離れてからもその画像のままにしたいということであれば、
CSSのみでの対応は難しく、JavaScriptでの対応が必要になってくると思います。
@bukimal
Questioner
とても的確な回答をありがとうございます！
Javascriptも勉強しようと思うのですが、如何せんhtmlどころかコーディングを始めたのすら1週間前でして、一つずつ学ばせていただきたいと思っております。
そのため今回はCSSだけでできるこちらのコードを使ってサイトを作ろうと思います。
作り終わったらJavascriptにも手を出そうと考えております。
繰り返しになりますが、回答ありがとうございました！

@SurferOnWww posted at 2024-10-03

JavaScript で実装してはいかが？　「javascript hover event」あたりをキーワードにしてググると役に立ちそうな記事がヒットしますので、調べてみてください。

サンプルを載せておきます。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body{
            background-image: url(/images/911GT2_1.jpg);
        }
    </style>
    <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', () => {
            document.getElementsByClassName("image2")[0].addEventListener('mouseover', () => {
                document.body.style.backgroundImage = 'url(/images/911GT2_2.jpg)'
            });
            document.getElementsByClassName("image3")[0].addEventListener('mouseover', () => {
                document.body.style.backgroundImage = 'url(/images/911GT2_3.jpg)';
            });

            // マウスが外れた時元に戻したいなら以下のコメントアウトを外す
            //document.getElementsByClassName("image2")[0].addEventListener('mouseout', () => {
            //    document.body.style.backgroundImage = 'url(/images/911GT2_1.jpg)'
            //});
            //document.getElementsByClassName("image3")[0].addEventListener('mouseout', () => {
            //    document.body.style.backgroundImage = 'url(/images/911GT2_1.jpg)';
            //});
        });
    </script>
</head>
<body>
    <ol>
        <li class="image2">画像2に差し替え</li>
        <li class="image3">画像3に差し替え</li>
    </ol>
</body>
</html>

1Like

Comments

@bukimal
Questioner
回答ありがとうございます！
やはりJavascriptがとても便利そうで、今回作っているサイトが完成したらJavascriptにも勉強を始めようと思います。その時に参考にさせていただきます！
調べ方まで書いていただいて感無量です！

@bukimal posted at 2024-10-03

@YottyPG さんの回答のコードを使わせていただいた所、無事問題が解決したので、質問をクローズさせていただきます。皆さんご回答いただきありがとうございました！

0Like

Are you sure you want to delete the question?

カーソルが重なっている要素によって、背景画像を変えたい。

解決したいこと

自分で試したこと

3Answer

Comments

Comments

Your answer might help someone💌