STUDY

子要素にホバーすると親要素が変化する

上記の「Trigger」にホバーすると、その親要素の背景色が変わります。

重要なのは2点。1つは、操作したい親要素にpointer-events: none;を指定。

もう1つは、トリガーにしたい子要素にpointer-events: auto;を指定すること。

あとは、親要素と子要素の双方に:hoverスタイルを指定するだけ。

親要素を指定するCSSプロパティは存在しませんが、pointer-eventsを使えば、ホバー時のスタイルを自由に変化させられます。