CSS
CSSのhoverで離れた兄弟要素（並列に並んだ要素）にスタイルを与える方法
いつもご利用ありがとうございます。このブログは、広告費によって運営されています。
オススメ本
CSS の hover で離れた兄弟要素（並列に並んだ要素）にスタイルを与える方法についてまとめました。
今回のサンプルでは、２番目をホバーすると、３、４、５に対しても色を与えています。
ホバーした結果の画面がこちら
ホバーしたときのコード
HTML
<div class="test1">test</div>
<div class="test2">test2</div>
<div class="test3">test3</div>
<div class="test4">test4</div>
<div class="test5">test5</div>CSS
/* 本人 */
.test2:hover {
color: blue;
font-size: 30px;
}
/* １個下の要素 */
.test2:hover + .test3 {
color: orange;
}
/* ２個下の要素 */
.test2:hover ~ .test4 {
color: pink;
}解説
同じ階層の一個したに書かれた要素（兄弟要素：1 個下の弟？）は、＋で書く。
.test2:hover + .test3 {
color: orange;
}2 個以上離れた要素（兄弟要素：2 個以上下の弟？）は、~で書くみたいです。
.test2:hover ~ .test4 {
color: pink;
}動かないコードたち
/* これは動かない */
/* .test2:hover 〜 .test1 {
font-size: 20px;
color: red;
} */
/* ２から１へ変化を与える方法がわからない・・・ */
/* これも動かない */
/* .test2:hover + .test5 {
color: green;
} */まとめ
以上です。
絶賛、1 個兄な要素に対して CSS の hover で変化を与える方法を募集中です。
感想・苦情は TwitterDM にご連絡ください。
それでは！
