Written by Kasumi

マウスでホバー出来る端末以外はCSSで装飾した:hoverを無効にする方法【メディアクエリで解決】

マウスでホバー出来る端末以外はCSSのhoverを無効にしたい。(スマホやタブレットなど)

本記事ではこのような悩みを解決します。

メディアクエリを使ってhoverを制限

@media(hover: hover) {
  .link:hover {
    opacity: .7;
  }
}

メディア特性のhoverプロパティを使う事でホバーを使う端末のみCSSを充てる事が出来ます。

@media(hover: hover){}と記述。

上記オブジェクト内でhover時に装飾するCSSを記述すればOKです。

max-widthやmin-widthなどで範囲指定する必要がありません。

もちろん、スマホなどマウスホバーを使用しない端末では上記CSSが無効になり、反映されないようになります。

以上で実装完了です。

まとめ

マウスでホバー出来る端末以外はCSSのhoverを無効にする方法について紹介しました。

目次

関連記事

JavaScript

【JavaScript】スプレット構文(…)を使い、配列・オブジェクトを追加・連結(マージ)する方法

2022.12.04
735
JavaScript

【JavaScript】変数や関数をファイル分割。必要な時に読み込みする方法【モジュール化しよう】

2023.01.06
2696
JavaScript

JavaScriptでページの読み込み中、ローディング画面を表示する方法

2023.02.15
10917
JavaScript

disabledを使って任意のinput要素を入力無効にする方法【条件判定で解除する】

更新日:2022.09.09
7028