HTML

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

コピペで簡単 CSS でマウスホバー中以外の要素をフェードアウトさせる方法を紹介します。
例えば、同じようなボタンが並んでいる中で、ホバーしたボタンだけを目立たせたい時に便利な方法です。

  1. :hover の組みわせで実装する方法
  2. :not を使用する方法

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 ファイルの場合は次のコードを追加してください。


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 でマウスホバー中以外の要素をフェードアウトさせる方法を紹介しました。

合わせて読みたい関連記事