[CSS]ホバー時のエフェクトを自分以外の要素にも適用するチュートリアル
Post on:2011年3月29日
sponsors
ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するスタイルシートのチュートリアルを紹介します。
下記キャプチャのデモでは、ホバー時に不透明度を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
