[CSS] hover したら他の要素のスタイルを変える方法

2022-04-16HTML&CSS

CSS でカード形式の記事一覧のサムネイル以外をホバーした時に、サムネイルを薄く透過させるため、hover したら他の要素のスタイルを変える方法を調べたのでメモ。また、カード内の一部はホバーしても変化させない方法メモ。
後者は、親子関係を調整するやり方と pointer-events を使ったやり方を記す。

カードの全エリアがホバー対象

カードのどこにカーソルを当てても、サムネイルの色が変化する。

See the Pen when hover on parent change child style by AgoPeanuts (@AgoPeanuts) on CodePen.

親要素である card クラスが hover されると、 thumbnail クラスに background-blend-mode エフェクトがかかる。

.card:hover .thumbnail {
  background-blend-mode: soft-light;
}

Tag はホバー対象外 : 要素の親子関係を変えた例

Tag1 とかにカーソルを当ててもサムネイルの色は変化しない。

See the Pen hover effect without tags by AgoPeanuts (@AgoPeanuts) on CodePen.

全エリアがホバー対象だったサンプルから、thumbnail + description と tag の親子関係構造を変えた。つまり、ホバーエリアとホバーされないエリアを同じ階層にした。そして、ホバーエリアが hover されると、 thumbnail クラスにアクションが起こる。

兄要素にホバーエフェクトはかけられない

thumbnail + description を hover-box クラスの div で囲わないで、 tag クラスの div でタグを囲むだけでいいのではないかと思うが、これではうまくいかない。
description クラスを  hover しても、 thumbnail クラスを操作することはできない。これは hover 要素より上に記述されている要素 ( 兄要素 ) を 操作できないため。

See the Pen hover effect doesn’t work by AgoPeanuts (@AgoPeanuts) on CodePen.

child1 をホバーすると、child3 の色が変わる。
child2 をホバーしても、parent の色は変わらない。
child3 をホバーしても、child2 の色は変わらない。

Tag はホバー対象外 : pointer-events 使用例

これも Tag1 とかにカーソルを当ててもサムネイルの色は変化しない。全エリアがホバー対象だったサンプルと同じ構造で、 pointer-events を使って、タグのホバーを無効化した。

See the Pen hover with pointer-events by AgoPeanuts (@AgoPeanuts) on CodePen.

card クラスに pointer-events: none; を指定し、マウスイベントの対象外にしておく。
thumbnail クラスや h1 タグなど、ホバー対象にしたい要素に pointer-events: auto; を指定する。これで、 tag クラスのみが pointer-events: none; となりホバーが無効化される。