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否定疑似クラスを含む疑似セレクタのブラウザサポート状況です

via

30 Seconds of CSS – Sibling fade