ホバーの分岐にはメディアクエリのwidthではなくhoverを使おう

メディアクエリにはhoverプロパティがあり、ユーザーがホバーに対応しているデバイスかどうかの判定が行えます。 これを使用することによって、画面幅での分岐が必要なくなるためタブレットのlandscape含めた対応も容易になります。 また、メディアクエリはJavaScriptからもmatchMediaという関数を使う事で使用することが可能なのでCSSとJavaScriptでの利用例を載せていきたいと思います。 CSS CSSでの利用は簡単ですね .link { background: rgba(0, 0, 0, 1); } @media (hover: hover) { .link:hover { background: rgba(0, 0, 0, 0.7); } }

[yoshi-na]

知らなかった…

[neet_modi_ki]

タッチデバイスにhoverエフェクトつけたままだと、タップ時にそれが発動して、解除されなかったり意図しない挙動になることがあるからかな > ブコメ

[rrttaa]

“@media (hover: hover) {”

[mayumayu_nimolove]

つけたままはダメなの？

[tmayuko312]

なるほど、ホバーができる機種のみにCSSを反映させる事ができるのね。IEはNGらしいが、6月に終了だから心置きなく使えそう。