Javascriptのホバーアクションを指定する理由

css の hover はホバーした要素にのみプロパティを変更出来ます。
ある要素にホバーした時に、別の要素のプロパティを変更したい場合は、javascriptの mouseenter、mouseleave アクションを使用します。

例

簡単な mouseenter、mouseleave アクションを実行してみます。

HTML

<div class="sample_01">ホバーして下さい。</div>
<div class="sample_02">初期状態</div>

CSS

.sample_01, .sample_02 {
  height: 50px;
  width: 100px;
  margin-top: 10px;
}

.sample_01 {
  background-color: blueviolet;
  color: #ffffff;
}

.sample_02 {
  background-color: #ffd700;
  color: #ffffff;
}

Javascript

const sample_01 = document.querySelector('.sample_01');
const sample_02 = document.querySelector('.sample_02');

// 要素にカーソルが入る
sample_01.addEventListener('mouseenter', function (e) {
    sample_02.style.backgroundColor = 'red';
    sample_02.textContent = 'red';
});

// 要素からカーソルが外れる
sample_01.addEventListener('mouseleave', function (e) {
    sample_02.style.backgroundColor = 'blue';
    sample_02.textContent = 'blue';
});

結果

ホバーして下さい。

初期状態

最後に

特にありません。