LoginSignup
0

More than 1 year has passed since last update.

スマホブラウザで「:hover」疑似クラスを無効にする

Last updated at Posted at 2021-10-08

Web制作持によく使われる:hover擬似クラスですが、レスポンシブ対応させたWebページで
タップ操作しかないスマホブラウザでは:hoverのスタイル変化を無効にしたいという場合の実装法です。

めちゃくちゃシンプルですが、

@media screen and (min-width: 600px) {
 a:hover {
 }
}

のようにメディアクエリの(min-width: ***px)でスタイルを適用する最低画面幅を設定し、
その中で:hoverのスタイルを定義します。

上の例では「600px以上の画面幅があるときは<a>:hoverを適用してね」ということなので、厳密には「スマホブラウザのみで無効にする」というわけではありませんが、実際問題的にはスマホ表示時には無効にできると思います。


以上、個人的備忘録失礼しました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0