CSS マウスホバー中以外の要素をフェードアウトさせる方法

Last update 
/ Posted by Takumi Hirashima

CSS でマウスホバー中以外の要素をフェードアウトさせる方法を紹介します。
例えば、同じようなボタンが並んでいる中で、ホバーしたボタンだけを目立たせたい時に便利な方法です。
実現するための方法が幾つかあるので、順を追って説明していきます。

  1. :hover の組みわせで実現する方法
  2. :not を使用する方法
  3. まとめ

1.:hover の組み合わせで実現する方法

まずは :hover の組み合わせで実現する方法を紹介します。
ベースの HTML の指定は次の通りです。

<ul>
  <li>
    あああああ
  </li>
  <li>
    いいいいい
  </li>
  <li>
    ううううう
  </li>
</ul>

次のコードを css に追加します。

  
  ul:hover li {
    opacity: 0.5;
  }
  ul li:hover {
    opacity: 1;
  }

対象を囲む要素に :hover を指定するのがポイントです。

デフォルトは不透明度 100% です。親要素にマウスホバーした場合に子要素がすべて不透明度 50% になります。
その状態で特定の子要素にマウスホバーをすると、ホバー中の子要素が不透明度 50% から 100% になります。

Sass ファイルの場合

Sass ファイルの場合は次のコードを追加してください。

  
  ul:hover li {
    opacity: 0.5;
    &:hover {
      opacity: 1;
    }
  }

2.:not を使用する方法

CSSセレクタ :not を使用した方法を紹介します。
:not は css3 のセレクタなので、IE の対応が気にあるところですが、実装が簡単なので実現するための候補の一つとして紹介します。
ベースの HTML は :hover の時と同じものを使用します。
次のコードを css に追加します。

  ul:hover li:not(:hover) {
    opacity: 0.5;
  }

デフォルトの不透明度が 100% ではない時は微調整が必要です。

まとめ

CSS でマウスホバー中以外の要素をフェードアウトさせる方法を紹介しました。

私が続けて読みたい関連記事

スポンサーリンク