CSS

【CSS】:hover疑似クラスで指定要素とは別の要素にスタイルを適用する

更新日:

スポンサードリンク

CSSの「:hover」疑似クラスを使えばマウスオーバー時にその要素に対して何らかのスタイルを適用させることが可能ですが、:hoverエフェクトを指定した要素以外の要素にスタイルを適用させたいときには隣接要素の場合は「+」兄弟要素の場合は「>」として以下のようにします。

<style type="text/css">
<!--
#test:hover{
background-color: blue;
}
#test:hover + #target{
background-color: red;
}
#test:hover > #inner{
background-color: green;
}
#test:hover > #inner:hover{
opacity: 0.7;
}
-->
</style>
<div id="test">
<div id="inner"></div>
</div>
<div id="target"></div>

デモ)

#test

#inner
#target

さらに兄弟要素のときに:hover疑似クラスを重ねがけしたいときは上のように単純に:hoverをもう一つ付けるだけで大丈夫です。

HOVER!(1) (カドカワデジタルコミックス)
KADOKAWA / 角川書店 (2012-09-01)
スポンサードリンク

-CSS

Copyright© めめんと , 2019 All Rights Reserved Powered by AFFINGER5.