2021年11月10日(水)

CSSでhoverアニメーションの実行をPCのみに制御する

• 0
• 19
• 57
• 61

iPhoneやAndroidのスマホやタブレットなどのタッチデバイスでCSSのhoverアニメーションをつけていると、タップ（クリック）動作にいろいろと支障がでることがあります。

CSSで指定するhover動作をPCのみに実行させるために、JavaScriptでデバイスの判定をしたりすることもありますが、CSSのメディアクエリーだけでも制御ができるのででメモとして紹介します。

mediaクエリーのhoverとpointer

PCデバイスのみにCSSのhover動作を実行させるには、CSSメディアクエリーで判定できる以下の2つを使用します。

・使用デバイスがhoverを使えるかどうか
・使用デバイスのポインターの種類

この2つを組み合わることでPCのみを判定させた状態を作り、その中にhover動作の指定を記述します。

実際の記述方法については以下になります。

a { opacity: 1; transition: all .5s linear; } @media (hover: hover) and (pointer: fine) { a:hover { opacity: .5 } }

「@media (hover: hover) ...