【Web制作】jQueryのhoverで別要素の値を変化させてみよう！【手順公開】

2022年12月29日

ぶたっち

大学生時代にプログラミング学習を始め、Web業界に興味を持つ。
スクールでプログラミングを勉強し、プログラミングのインターンに参加する。
プログラミングスクールに通ったこと、未経験からプログラミングを学んだこと、徹底的にプログラミングスクールを比較した経験をもとに、プログラミングについての記事を執筆中。

hoverで変化させることはできるけど、ほかの要素も変化させたい！
一般的なhoverでの変化しか見たことがない！
hoverでできることを増やしたい！

などに答えていこうと思います。

hoverはよく使うと思いますが、別要素と関連付けて変化させることはあまりないでしょう。

CSSを使えばほかの要素も変化させれるのでは？

確かに、親要素や兄弟要素、子要素の場合はCSSを使うことによって別の要素を変化させることができますが、全く関係のない要素を変化させるためにはjQueryを使う必要があります。

今回はjQueryを使った方法を紹介します。

1 jQueryを使ってhoverで別要素の値を変化させる方法
2 コードの解説
3 まとめ

jQueryを使ってhoverで別要素の値を変化させる方法

まずは早速実物を見ていきましょう。

See the Pen Untitled by haruto kubo (@butacchi) on CodePen.

上の図にある「hover用ボタン」にマウスを乗せると「この要素が変化」というところが変化するはずです。

この二つは関連する要素ではありませんが、hoverを使うことができています。

それでは以下でコードの解説をします。

コードの解説

まずこちらがHTMLになります。

<div class="box1">
  <div class="btn change">この要素が変化</div>
</div>
  <div class="box2">
    <div class="btn change-btn">hover用ボタン</div>
</div>

特に変わったところはありませんが、box1とbox2に分けることでbtn同士の関連性をなくしています。

また、のちにjQueryでイベントを発生させるためにchangeクラスとchange-btnクラスを別途付けています。

次にこちらがCSSになります。

.box1,.box2 {
  width: 300px;
  background-color: gray;
  justify-content: center;
  color: white;
  margin-bottom: 20px;
  display: flex;
}
.btn {
  background-color: #61e5ff;
  padding: 10px;
  margin: 15px;
  border-radius: 10px;
  cursor: pointer;
}

.hover {
  color: black;
  background-color: white;
  transform: scale(1.1, 1.1);
  transition: color .5s, background-color .5s, transform .5s;
}

box1、box2、btnクラスはボタンを作るためですので、今回のhoverに関係するものではありません。

hoverクラスをjQueryによってchangeクラスに付けますので、hover内に変化する情報を書いています。

transitionは「all」を使うことが多いですが、今回のように要素が離れている場合は予期せぬ動作が発生する場合がありますので、一つずつ指定して使うようにしています。

最後はjQueryです。

$(function(){
  $('.change-btn').hover(
  function() {
    $('.change').addClass('hover');
  },
    function() {
      $('.change').removeClass('hover');
    }
  );
});

jQueryでは2行目で、change-btnクラスをhoverしたときにchangeクラスでイベントが発生するようにしています。

また、4行目と7行目でhoverの有無によってhoverクラスを付け外すようにしています。

こうすることによって、change-btnクラスが基準となったイベントができるようになります。

この方法を使えば以下のようなこともできます。

See the Pen Untitled by haruto kubo (@butacchi) on CodePen.

HTMLとjQueryの内容はほとんど変わっていませんが、CSSでrotate3dを利用して3次元的な回転をしています。

.cover {
  display: flex;
}
.box1,.box2 {
  width: 300px;
  background-color: gray;
  justify-content: center;
  color: white;
  margin-right: 20px;
  display: flex;
  align-items: center;
}
.box1 {
  height: 80px;
}
.box2 {
height: 100px;
}
.btn {
  background-color: #61e5ff;
  padding: 10px;
  margin: 15px;
  border-radius: 10px;
  cursor: pointer;
}

.hover {
  color: black;
  background-color: green;
  transform: rotate3d(1,1,1,360deg)scale(0.8, 0.8);
  transition: color .5s, background-color .5s, transform .5s;
}