隣接兄弟セレクタ vs nth-childセレクタ：ホバーイベントで別のdivを操作する
2024-04-02
CSSホバーイベントで別のdivのスタイルを変更する方法
隣接兄弟セレクタを使う
HTMLの構造が以下の場合、#div1にマウスが乗った時に#div2の背景色を変えることができます。
<div id="div1">
...
</div>
<div id="div2">
...
</div>
CSSは以下のようになります。
#div1:hover + #div2 {
background-color: red;
}
この例では、#div1:hoverで#div1にマウスが乗っている状態を指定し、+記号を使って#div1の直接後ろにある#div2のみを対象にしています。
nth-childセレクタを使う
<div id="parent">
<div id="child1">
...
</div>
<div id="child2">
...
</div>
<div id="child3">
...
</div>
</div>
#parent > div:nth-child(2):hover ~ #child3 {
background-color: red;
}
この例では、#parent > div:nth-child(2):hoverで#parent内の2番目のdivにマウスが乗っている状態を指定し、~記号を使って#parent内のすべてのdivの中で#child3のみを対象にしています。
上記以外にも、JavaScriptを使う方法やCSSの:target疑似クラスを使う方法などがあります。
注意点
- 隣接兄弟セレクタを使う場合、HTMLの構造が崩れると意図した動作をしなくなる可能性があります。
HTML
<div id="div1">
マウスを乗せてみてください
</div>
<div id="div2">
別のdivのスタイルが変わります
</div>
CSS
#div1:hover + #div2 {
background-color: red;
}
実行方法
- HTMLファイルを保存します。
#div1にマウスを乗せてみます。
結果
#div1にマウスを乗せると、#div2の背景色が赤色に変わります。
上記は基本的な例です。さまざまな方法を組み合わせて、複雑な動きも実現できます。
CSSホバーイベントで別のdivのスタイルを変更する他の方法
JavaScriptを使うと、より柔軟な動きを実現できます。
例
<div id="div1">
マウスを乗せてみてください
</div>
<div id="div2">
別のdivのスタイルが変わります
</div>
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
div1.addEventListener("mouseenter", () => {
div2.style.backgroundColor = "red";
});
div1.addEventListener("mouseleave", () => {
div2.style.backgroundColor = "";
});
CSSの:target疑似クラスを使う
:target疑似クラスを使うと、URLハッシュに指定された要素にマウスが乗った時にスタイルを変更できます。
<div id="div1">
<a href="#div2">別のdivへ移動</a>
</div>
<div id="div2">
別のdivのスタイルが変わります
</div>
#div2:target {
background-color: red;
}
それぞれの方法のメリットとデメリット
- メリット: 簡単でわかりやすい
- メリット: 隣接兄弟セレクタよりも柔軟
JavaScript
- メリット: 最も柔軟
- デメリット: コード量が増える
- メリット: ハッシュリンクと組み合わせることで、ページ遷移せずに別のdivにフォーカスできる
- デメリット: URLハッシュが使えない環境では動作しない
- 簡単な実装で良い場合は、隣接兄弟セレクタを使うのがおすすめです。
- より柔軟な実装が必要場合は、nth-childセレクタやJavaScriptを使うのがおすすめです。
- ハッシュリンクと組み合わせたい場合は、CSSの
:target疑似クラスを使うのがおすすめです。
css
