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