CSSスニペット：簡単なコードでマウスホバーした要素以外を透過する | かちびと.net

Result かなり昔にJSによる方法を書きましたがどこちらの方がスマートだったのでメモ ハイライトは要素にユーザーの注視を促す手法として効果的なので今でも健在の手法だと思います cssspan {/*アニメーション*/ padding: 0 1rem; transition: opacity 0.2s; } .sibling-fade:hover span:not(:hover) {/*透過処理*/ opacity: 0.5; }親要素にホバーしたら全体を透過、更に要素にホバーしたもの以外に適応させる これでマウスホバー中のアイテムだけは透過処理範囲から外れるようになります html<div class="sibling-fade"> <span>Item 1</span> <span>Item 2</span> <span>Item 3</span> <span>Item 4</spa