• HOME > 
  • CSS > 
  • CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【...

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【hover:hover】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2023年10月01日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

スマホでタップしたときにホバーのスタイルが消えない?

マウスのカーソルを載せたときに専用のスタイルを適用させることができる疑似要素「hover」、多くの方がこれを使ってボタンなどにホバー時のスタイルを設定していると思います。

そんなメジャーな疑似要素「hover」ですが、スマホで要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?

ホバー時のスタイルが適用され続ける例

スマホを始めとしたタッチデバイスは当然ながらホバーというものが存在しませんので、疑似要素「hover」が適用されるかどうかの判定基準が「要素をタップしてから別の要素をタップするまで」となっています。

そのためタップしたあともhoverのスタイルが適用され続けてしまうという訳です。

判定基準の解説画像

この現象、見落としていたり、違和感を感じつつも見て見ぬふりをしていた方も多いのではないでしょうか?

今回はCSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う

スマホでのホバーの挙動の対策に使用するのは、CSSにおけるレスポンシブ処理でお馴染みの「メディアクエリ」です。

実はメディアクエリを使うと、画面サイズやプリントだけでなく「ホバーが可能かどうか」という分岐も行うことも可能なのです。

ホバーできる場合とできない場合でスタイルを分けたいときは次のように記述します。

メディアクエリの書き方

このようにして、「media (hover:hover)」の中にだけ疑似要素「hover」を使ったスタイルを書くようにすれば、スマホでタップした時にホバー時のスタイルが適用され続けることがなくなります。

CSS

@media (hover:hover){
    button:hover{
        background:#d40000;
        color:#fff;
    }
}

タップしたときのスタイルには疑似要素「active」を使う

ホバーが有効ではないデバイスの場合のスタイルは「media (hover:none)」の中に記述します。

しかし、ここで疑似要素「hover」を使ってしまってはメディアクエリが台無しです。

タップした時だけ適用するスタイルは疑似要素「active」を使って記述します。

CSS

@media (hover:none){
    button:active{
        background:#d40000;
        color:#fff;
    }
}

「media (hover:hover)」と疑似要素「hover」、「media (hover:none)」と疑似要素「active」という2つの組み合わせでスタイルを設定しておけばPCでもスマホでも思い通りのスタイルを適用することができます。

リンク先のサムネイル
CSSの疑似要素・疑似クラスの種類と使い方

疑似要素・疑似クラスは、どちらも元となる(基準となる)要素に対して追加のスタイルを指定したり装飾を行うために使用するCSSのセレクタ―です。どちらもHTMLのソースコードには追加の記述やマークアップの必要がなく...【もっと読む】

まとめ

以上がCSSのメディアクエリでスマホでのホバーの挙動の対策を行う方法です。

私もタップ時のホバーの挙動に関しては「そういうものだから仕方ないのかも」と思っていましたが、このように簡単に修正できるので、皆様もこれを機に見直してみてはいかがでしょうか?

広告
広告

関連する記事

サムネイル

CSSの疑似クラスnth-childとnth-of-type……

2024年11月07日
疑似クラスnth-childとnth-of-typeについて CSSの疑似クラス「:nth-child」と「:nth-of-type」はどちらも何番目の要素とい […]
サムネイル

CSSのみでスムーススクロールを実装する【scroll-be……

2024年08月01日
スムーススクロールはCSSだけで実装できる? これまでスムーススクロールはJavaScriptで実装するものと思い込んでいたのですが、先日ふとしたきっかけで、C […]
サムネイル

CSSのinline-flexの使いどころ【flexによる横……

2024年05月29日
inline-flexはCSSのdisplayプロパティの値の一つで、横並びレイアウトを作ることができる「flex」にインライン効果を持たせた性質があります。
サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。