タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

mediaqueriesとhoverに関するdonnie28064212のブックマーク (1)

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

    iPhoneAndroidのスマホやタブレットなどのタッチデバイスでCSSのhoverアニメーションをつけていると、タップ(クリック)動作にいろいろと支障がでることがあります。 CSSで指定するhover動作をスマホやタブレットでは無効にさせてPCのみで実行させるために、JavaScriptでデバイスの判定をしたりすることもありますが、CSSのメディアクエリーだけでも制御ができるのでメモとして紹介します。 mediaクエリーのhoverとpointer PCデバイスのみにCSSのhover動作を実行させるには、CSSメディアクエリーで判定できる以下の2つを使用します。 ・使用デバイスがhoverを使えるかどうか ・使用デバイスのポインターの種類 この2つを組み合わせることでPCのみを判定させた状態を作り、その中にhover動作の指定を記述します。 実際の記述方法については以下です。 a

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