HTML、CSS、ホバーイベント：要素がホバーされた時に他の要素に影響を与える方法

2024-04-02

HTML、CSS、ホバーイベント：要素がホバーされたときに他の要素に影響を与える方法

このチュートリアルでは、HTML、CSS、ホバーイベントを使用して、要素がホバーされたときに他の要素に影響を与える方法について解説します。具体的には、以下の3つの方法を紹介します。

CSSセレクタ
CSSプロパティ
JavaScript

CSSセレクタを使用して、ホバーされた要素とその子孫要素にスタイルを適用できます。

例：

<div class="parent">
  <div class="child">
    テキスト
  </div>
</div>

.parent:hover .child {
  color: red;
}

上記のコードでは、parent要素がホバーされたとき、child要素のテキスト色が赤に変わります。

<div class="parent">
  <div class="child1">テキスト1</div>
  <div class="child2">テキスト2</div>
</div>

.parent:hover .child2 {
  color: red;
}

JavaScriptを使用して、ホバーされた要素と他の要素を動的に操作できます。

<div class="parent">
  <div class="child">
    テキスト
  </div>
</div>

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

parent.addEventListener('hover', () => {
  child.style.color = 'red';
});

上記以外にも、以下のような方法で要素がホバーされたときに他の要素に影響を与えることができます。

CSSアニメーション
CSSトランジション

HTML、CSS、ホバーイベントを使用して、要素がホバーされたときに他の要素に影響を与える方法はいくつかあります。どの方法を使用するかは、要件と目的によって異なります。

<div class="parent">
  <div class="child">
    テキスト
  </div>
</div>

.parent:hover .child {
  color: red;
}

<div class="parent">
  <div class="child1">テキスト1</div>
  <div class="child2">テキスト2</div>
</div>

.parent:hover .child2 {
  color: red;
}

<div class="parent">
  <div class="child">
    テキスト
  </div>
</div>

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

parent.addEventListener('hover', () => {
  child.style.color = 'red';
});

要素がホバーされた時に他の要素に影響を与えるその他の方法

CSSアニメーションを使用して、ホバーされた要素と他の要素を同時にアニメーションさせることができます。

<div class="parent">
  <div class="child">
    テキスト
  </div>
</div>

.parent:hover .child {
  animation: my-animation 1s ease-in-out;
}

@keyframes my-animation {
  0% {
    color: black;
  }
  100% {
    color: red;
  }
}

<div class="parent">
  <div class="child">
    テキスト
  </div>
</div>

.parent:hover .child {
  transition: color 1s ease-in-out;
  color: red;
}

<div class="parent">
  <div class="child">
    テキスト
  </div>
</div>

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

parent.addEventListener('hover', () => {
  // ライブラリを使用して、child要素と他の要素を操作
});