CSSメディアクエリを使用してホバー動作が有効なPCデバイスでのみホバー時のスタイルを設定する(mixinあり)

[ ID : 8350 ]
ブロンズ
CSSメディアクエリを使用してホバー動作が有効なPCデバイスでのみホバー時のスタイルを設定する(mixinあり)

概要

マウスポインターを使ってホバー動作を操作できるPCデバイスをCSSメディアクエリを使用して判定してスタイルを変更する設定を紹介。また、使いやすいようにSCSSのmixinも記載。

用途・要件

  • マウスポインターを使用でき、かつホバー動作を操作できるPCデバイスをCSSメディアクエリを使用して判定。
  • デバイスの横幅やJSのUserAgentによる判定は行わない。
  • 使いやすいようにSCSSのmixinを用意。(IE11に対応させる方法も記載)

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録