Result
かなり昔にJSによる方法を書きましたがどこちらの方がスマートだったのでメモ
ハイライトは要素にユーザーの注視を促す手法として効果的なので今でも健在の手法だと思います
css
span {/*アニメーション*/ 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</span> <span>Item 5</span> <span>Item 6</span></div> |
can i use
:not否定疑似クラスを含む疑似セレクタのブラウザサポート状況です
