[CSS]ホバー時のエフェクトを自分以外の要素にも適用するチュートリアル

ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するスタイルシートのチュートリアルを紹介します。

下記キャプチャのデモでは、ホバー時に不透明度を3種類適用しています。

デモのキャプチャ

Hover on "Everything But"
デモページ

[ad#ad-2]

下記は各ポイントを意訳したものです。

エレメントにホバー時のエフェクトを与えることは簡単です。
ここでは、ホバー時に不透明度が変化するものを例にしてみます。

CSS

div {
   opacity: 1.0;
}
div:hover {
   opacity: 0.5;
}

これで、ホバー時に不透明度が0.5になるようになりました。

ここまでは簡単ですが、ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するには、どうしたらよいでしょうか? 例えば隣接した兄弟のdiv要素などに。
まずは、HTMLの基本的な例を見てください。

HTML

<section class="parent">
  <div></div>
  <div></div>
  <div></div>
</section>

[ad#ad-2]

兄弟を内包する親「.parent」のホバー時に、その子のdiv要素全てに不透明度の変更を適用します。

CSS

.parent:hover > div {
  opacity: 0.5;
}

そして、「.parent」がホバーされた状態で、ホバーされた子のdiv要素だけ不透明度を戻します。

CSS

.parent:hover > div:hover {
  opacity: 1.0;
}

このアイデアは、階層のレベルが深くなっても利用できます。
下記のデモでは3つのリストを使用し、ホバー時に全体の不透明度を変更し、ホバーされた子の要素とその列の不透明度を更に変更させています。

デモのキャプチャ

デモページ

sponsors

top of page

©2018 coliss