ホーム
Sponserd by↑転職したい人向け、ベンチャー企業の採用動画があります

【CSS】hoverで他の要素に変化を与えるサンプル

あとで追記しますが、

CSSだけで:hoverするとき、他要素に変化を与えるサンプルを投下します

結果(test2をホバーしているスクショ)

結果のスクリーンショット

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 〜 .test1 {
  font-size: 20px;
  color: red;
}
/* 2から1へ変化を与える方法がわからない・・・ */
.test2:hover {
  color: blue;
  font-size: 30px;
}
.test2:hover + .test3 {
  color: orange;
}
.test2:hover ~ .test4 {
  color: pink;
}
.test2:hover + .test5 {
  color: green;
}

仕様がよくわからない上に説明が難しい。

同じ階層の一個したに書かれた要素(兄弟要素:1個下の弟?)は、

.test2:hover + .test3 {
  color: orange;
}

と、+で書く。 2個以上離れた要素(兄弟要素:2個以上下の弟?)は、

.test2:hover ~ .test4 {
  color: pink;
}

.test2:hover + .test5 {
  color: green;
}

と、 ~で書くみたいです。 +だと反映されませんでした。

絶賛、1個兄な要素に対してCSSのhoverで変化を与える方法を募集中です。 よろしくお願いします。