Hoverした要素と違う要素を操作する方法。

はじめに

「(要素名など):hover」

とすると、指定した要素にマウスホバーした際、その要素をどう変化させるか指定することができます。これは多くの方が知っているかと思います。
では、ホバーした要素と違う要素を操作したい場合はどうすればよいのでしょうか？
HTML&CSSを始めたばかりの方は疑問に思うでしょう。
実は、方法はとっても簡単なんです！

①ホバーした要素と同じ階層にある要素(兄弟要素)を操作させたい場合

兄弟要素を操作させたい場合は、以下の方法で行います！

.sibling1:hover ~ .sibling2{
　　(動作指定)
}

例

See the Pen 兄弟要素を変化 by Ryuji Watanabe (@ryuji0526) on CodePen.

「~」の後に変化させたい兄弟要素をしているだけで簡単に操作できちゃいます！

②ホバーした要素の配下にある要素(子要素)を操作したい場合

子要素を操作したい場合は、以下の方法で行います!

.parent:hover  .child1{
 	(動作指定)
}

例

See the Pen 子要素を操作 by Ryuji Watanabe (@ryuji0526) on CodePen.

子要素を変化させたい場合は「+」を付ける必要はありません！
半角スペースを開けましょう！

③ホバーした要素の兄弟要素の子要素を変化させたい場合

少し複雑になってきました。しかし、①と②で学んだことを応用すれば簡単に操作できます。

.parent:hover  ~ .parent2 .child2{
 	(動作指定)
}

例

See the Pen 兄弟要素の子要素を操作 by Ryuji Watanabe (@ryuji0526) on CodePen.

兄弟要素から子要素へと指定することで簡単に操作することができます！

おわりに

①、②の方法を意識すれば、もっと複雑な階層であっても操作することができます。しっかりと**「階層」**を意識してみなさんの思い通りの操作をしてみてください！