CSS ホバー時に別の要素を変更する方法

CSS でマウスホバーした時に、ホバーした要素ではない別の要素にアクション・変更を加える方法を紹介します。
例えば、似たボタンが並んでいる中で、ホバーしたボタン以外を半透明にしたい時などに便利な方法です。

  1. 擬似クラスの hover を使った方法
    1. 擬似クラス :hover を使った方法
    2. 否定疑似クラス :not を使った方法
  2. 自動開閉のアコーディオン風メニューの実装方法

擬似要素 :hover の組み合わせで実装する方法

この手のアクションは jquery などで実装しがちですが、CSSだけで実装が可能です。
この投稿では hover を使った方法や :not を使った方法を紹介します。

擬似クラス :hover を使った方法

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

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

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

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

対象を囲む要素(今回の例では ul タグ)に擬似クラス :hover を指定するのがポイントです。

デフォルトは不透明度 100% ですが、親要素にマウスホバーした場合に子要素がすべて不透明度 50% になります。
その状態で特定の子要素にマウスホバーをすると、ホバー中の子要素の不透明度 50% から 100% になります。
そうなることで、ホバーした要素以外で半透明になり、ホバーした要素のアクティブ状態が目立つことになります。

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

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

否定疑似クラス :not を使った方法

CSS の否定疑似クラス :not を使うと、hover を使った時よりもコードを短縮することができます。
:not は css3 のセレクタなので IE の対応が気にあるところですが、実装が簡単なので実現するための候補の一つとして紹介します。

ベースの HTML は :hover の時と同じものを使用します。
次のコードを css に追加します。

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

デフォルトの不透明度が 100% ではない場合は、微調整が必要です。
親要素にマウスが入ると子要素全体がホバー対象になります。次に、対象の子要素にホバーすると、その子要素が対象から外れるため、ホバーしている子要素のみがアクティブな状態のようになります。

自動開閉のアコーディオン風メニューの実装方法

紹介した方法を流用することで、次のような自動開閉のアコーディオンメニューを実装することができます。

実装すると次のような感じになります。
下記のエリアにマウスを被せて動きを確認してください。

ベースの HTML は次の通りです。

<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

CSSはこちら。

.box {
display: flex;
justify-content: space-between; /* 必須ではない */
}
.box .item {
width: 20%; /* 合計が100%を目安に調整 */
padding-top: 20%; /* 必須ではない */
transition: width .1s ease-in-out; /* 必須ではない */
}
.box:hover .item {
width: 10%; /* ホバー要素以外の大きさを指定 */
}
.box .item:hover {
width: 60%; /* ホバー要素の大きさを指定 */
}

カーソルの速度が早いと、開閉が間に合わない場合があります。
開閉のアニメーション速度を変更して、タイミングを調整してください。

まとめ

CSS でマウスホバーした時に、ホバーした要素ではない別の要素にアクション・変更を加える方法を紹介しました。