HTML

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;
}

対象を囲む要素に擬似クラス :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 でマウスホバーした要素以外の要素にアクションを加える方法を紹介しました。

この記事をシェアする