CSSのみでマウスホバーした要素以外の装飾を変更する方法

CSSのみで、マウスホバーした要素以外の要素を変化させる方法をご紹介いたします。

例えば、ナビゲーションリンクなどで、マウスホバーした要素以外の文字色を変えたり、透過させたりすることが可能です。

CSSのみでマウスホバーした要素以外の装飾を変更する方法

まずHTMLは以下のようにシンプルなものでOKです。効果を加えたいエリアを.hover-other-thanというクラスで内包します。

<ul class="hover-other-than">
  <li><a href="">要素1</a></li>
  <li><a href="">要素2</a></li>
  <li><a href="">要素3</a></li>
</ul>

続いて、CSSは以下のようにします。

.hover-other-than {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hover-other-than a {
  margin: 0 20px;
  transition: all .3s ease-in;
}

.hover-other-than:hover a:not(:hover) {
  color: #ccc;
}

上記のように指定すると、マウスホバーした要素以外の文字色が薄いグレーに変わります。

:not擬似クラスを使って、「.hover-other-thanにホバーしていて、かつ.hover-other-than aの中でマウスホバーしていない要素」に対してcolor:#ccc;を指定しています。

あとがき

CSSだけでも色んなことが実現可能になりました。:not疑似クラスを使えば、色んなパターンに対応できますね。それに状況によっては、セレクタの指定を簡潔にすることも可能です。