【コピペ可】jQueryで子要素にマウスホバーで親要素の背景を変更する方法

2022年12月25日

おしゃれなサイトにはコンテンツにマウスホバーで背景画像が切り替わるものがありますが、調べてみると子要素から親要素へCSSでの指定は出来ないようです…

さらに調べたところ、jQueryを使えば実装出来るのでは…！？と思いやってみました。

今回は、実際に実装出来た形の紹介とその骨組みのコードを紹介していきます！

まだまだ勉強中の為、もっと効率的なコードがあるかもしれません…

実際に実装した形

実際に実装した形を動画でお見せします。

上の動画のようにコンテンツの背景画像に対して、各パーツをマウスホバーすることで背景画像が変わるようにしています。

今回は、HTML・CSS・jQueryで実装しているので、それぞれ紹介していきます。

コード紹介

See the Pen Untitled by Az (@azdesigne) on CodePen.

全体を囲んだ親要素があり、その中の子要素がそれぞれマウスホバー時に親要素の背景を変更するように記述しました。

それぞれ言語ごとに分けて解説していきます！

HTML

<div class="contents-area">
    <div class="contents-card -contentsA">
        <h3 class="contents-text">contents A</h3>
    </div>
    <div class="contents-card -contentsB">
        <h3 class="contents-text">contents B</h3>
    </div>
    <div class="contents-card -contentsC">
        <h3 class="contents-text">contents C</h3>
    </div>
    <div class="contents-card -contentsD">
        <h3 class="contents-text">contents D</h3>
    </div>
</div>

HTMLでは、背景を表示したいコンテンツで囲み、その中にホバーで表示を変更させたいエリアを作ります。

“contents-card”で均等に振り分け、”-contents〇”でそれぞれ個別で変更出来るようにしています。

CSS

.contents-area {
  width: 100%;
  display: flex;
  background-color:sienna;
  transition: 0.4s;
}

.contents-card {
  width: calc(100% / 4);
  height: 200px;
  border: 0.2px solid rgba(194, 194, 194, 0.515);
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.contents-card .contents-text {
  color: black;
  font-size:0.8rem;
}

.-contentsA-hover {
  background-color:blue;
  transition: 0.4s;
}

.-contentsB-hover {
  background-color: turquoise;
  transition: 0.4s;
}

.-contentsC-hover {
  background-color: slategrey;
  transition: 0.4s;
}

.-contentsD-hover {
  background-color: yellowgreen;
  transition: 0.4s;
}

contents-area

全体の幅は全幅にしたいのでwidth: 100%;を指定し、要素をflexで横並びしています。

また、マウスホバー時にパッと切り替らないようにtransitionを設定しています。

contents-card

今回は表示するコンテンツは4等分したいのでwidth: calc(100% / 4);を設定し、さらに中の要素の位置をflexで設定しています。

-contents○-hover

ホバー時に表示したい背景色や画像などをここで設定しています。

contents-areaと同じようにtransitionを設定することでホバーのオンオフで切り替わりがスムーズになるようにしています。

実装時はここに背景画像を記述していました。

jQuery

$(function () {
  // hoverする要素のclass名
  $(".-contentsA").hover(
    function () {
      // hoverした時の処理(classを付与)
      $(".contents-area").addClass("-contentsA-hover");
    },
    function () {
      // hoverを外した時の処理(classを外す)
      $(".contents-area").removeClass("-contentsA-hover");
    }
  );
});
$(function () {
  // hoverする要素のclass名
  $(".-contentsB").hover(
    function () {
      // hoverした時の処理(classを付与)
      $(".contents-area").addClass("-contentsB-hover");
    },
    function () {
      // hoverを外した時の処理(classを外す)
      $(".contents-area").removeClass("-contentsB-hover");
    }
  );
});
$(function () {
  // hoverする要素のclass名
  $(".-contentsC").hover(
    function () {
      // hoverした時の処理(classを付与)
      $(".contents-area").addClass("-contentsC-hover");
    },
    function () {
      // hoverを外した時の処理(classを外す)
      $(".contents-area").removeClass("-contentsC-hover");
    }
  );
});
$(function () {
  // hoverする要素のclass名
  $(".-contentsD").hover(
    function () {
      // hoverした時の処理(classを付与)
      $(".contents-area").addClass("-contentsD-hover");
    },
    function () {
      // hoverを外した時の処理(classを外す)
      $(".contents-area").removeClass("-contentsD-hover");
    }
  );
});

それぞれ-contents○にホバーした時に親要素に-contents○-hoverを付与させることで全体の背景を設定したものに変えています。

そして、ホバーが外れたタイミングで-contents○-hoverを外すことで、元のコンテンツに戻るように記述しています。