マウスでホバー出来る端末以外は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を無効にする方法について紹介しました。
目次