CSSの疑似クラス:hoverを無効化する方法をまとめておきたいと思います。
ややニッチなテーマですが、私の場合、例えば以下のようなシーンで必要になりました。
- 非アクティブなボタンのマウスイベントを解除したい
- スマホ閲覧時にマウスイベントを取り除きたい
まずは基本的な方法を踏まえたうえで、各シーンに応じた対策を整理してみましょう。
もくじ
１．pointer-eventsでマウスイベントを無効化
まずは基本から。
マウスイベントを無効化するだけなら、CSSのpointer-eventsプロパティで一発です。
|
1 2 3 |
.sample { pointer-events: none; } |
pointer-eventsのデフォルト値はautoですが、noneを指定することで対象要素のマウスイベントを解除できます。
ただし:hoverだけでなく、クリック操作を含む全てのマウスイベントが無効になるので注意が必要です。
See the Pen CSS「:hover」無効にするコード by Miyako (@kouhekikyozou) on CodePen.
「:hoverを無効にした状態」にカーソルを合わせるとわかる通り、マウスイベントそのものが取り除かれます。
２．ボタン（disabled）のマウスイベントを解除
CSSをリセットしてからボタンをデザインしている場合、よく見逃しがちなのがdisabled時の挙動です。
disabledとはbuttonやinput等の機能を無効にする属性のこと。
ボタンにdisabledを適用するとクリックできなくなるため、主に「操作済み」「送信済み」のボタン等に応用されるテクニックです。
|
1 |
<button disabled>送信</button> |
ところがdisabledに指定しても、CSSの効果まで解除できるわけではないようです。
:hoverや:activeが反映されたままだと、ボタンが機能しているか否か判別が難しくなってしまいますよね。
そのため、以下のようにdisabled時の挙動をCSSに書き加えておくと良いでしょう。
See the Pen CSS「disabled」属性への装飾 by Miyako (@kouhekikyozou) on CodePen.
スタイルシートでは要素の後に [] （属性セレクタ）を付けることで、ターゲットとなる属性のスタイルを変更できます。
３．スマホ＆タブレット閲覧時のみ:hoverを無効化
マウスカーソルが無いスマホやタブレットでは、（一般的に）タップ後に:hoverが起動し他の要素がタップされるまでスタイルを持続する仕様になっています。
この:hoverの挙動が気に入らない場合は、メディアクエリでマウスイベントを打ち消すよう指定する必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
a { background-color: #fff; } a:hover { background-color: #aa2f27; } @media screen and (max-width: 750px) { a:hover { background-color: #fff; } } |
とは言え、このような二度手間を避けるためにも、モバイル優先でCSSを設計するのが理想的です。
|
1 2 3 4 5 6 7 8 9 |
a { background-color: #fff; } @media screen and (min-width: 750px) { a:hover { background-color: #aa2f27; } } |
上のようにモバイル用のスタイルを記述してから、メディアクエリでPC用のスタイルを指定するほうがコードも少なくて済みます。
まとめ
- マウスイベントを無効化するならCSSの
pointer-eventsが有効 - 非アクティブなボタンの挙動は属性セレクタで操作できる
- スマホ＆タブレット表示時に
:hoverを無効化するには、メディアクエリで上書きし直す
