2018年11月29日(木)

簡単なコードでマウスホバーした要素以外を透過する

• 0
• 1
• 9
• 22

Result

See the Pen Sibling fade by kachibito (@kachibito) on CodePen.

かなり昔にJSによる方法を書きましたがどこちらの方がスマートだったのでメモ

ハイライトは要素にユーザーの注視を促す手法として効果的なので今でも健在の手法だと思います

css

span {/*アニメーション*/ padding: 0 1rem; transition: opacity 0.2s; } .sibling-fade:hover span:not(:hover) {/*透過処理*/ opacity: 0.5; }

親要素にホバーしたら全体を透過、更に要素にホバーしたもの以外に適応させる
これでマウスホバー中のアイテムだけは透過処理範囲から外れるようになります

html

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6