概要
マウスポインターを使ってホバー動作を操作できるPCデバイスをCSSメディアクエリを使用して判定してスタイルを変更する設定を紹介。また、使いやすいようにSCSSのmixinも記載。用途・要件
- マウスポインターを使用でき、かつホバー動作を操作できるPCデバイスをCSSメディアクエリを使用して判定。
- デバイスの横幅やJSのUserAgentによる判定は行わない。
- 使いやすいようにSCSSのmixinを用意。(IE11に対応させる方法も記載)
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
実装
ローカル環境にコードを移設した際に動作しない場合はこちら。(トラブルシューティングページへ)