HTML/CSS

【CSS】hover時に別の要素にスタイルをあてる方法【+と>の使い分け】

 

悩む人
悩む人

CSSで要素がhoverされた時に、違う要素の色をかえるみたいなことはできないの?

 

こんな疑問に答えます。

 

結論から言うと、「隣接してたらhover。離れてたらjavascriptも使う」

ということになりそうです。

 

順に解説していきます。

hover時に別の要素にスタイルをあてる方法

 

See the Pen
bXgEqw
by kei (@kei_01011)
on CodePen.


ソースコードを見ればわかりますが、とても簡単です。

 

兄弟関係にある要素の場合・・・A hover: > B

隣接する要素の場合・・・・・・A hover: + B

 

この例で見ると、

「li」にhoverした時に、li要素の中のiにスタイルをあてる

「.top」にhoverした時に、隣接する要素の「.bottom」にスタイルをあてる

 

こんな感じの動きになります。

 

 

よくあるのが、リストにホバーしたら、リスト内の画像だけが拡大されたり、

画像にホバーするとテキストが表示されたりと、いろんなことに使えます。

 

ただし、要素同士が離れていると、これが使えません。

そんな時はjavascriptやjQueryを使用する必要がありますので、注意が必要ですね。