ホバー可能なデバイスのみa要素のホバースタイルを有効にする

gravity-works (2023年10月10日 15:36) | コメント(0)
通常、CSSで :hover スタイルを設定するとスマホでも有効になってしまい、
タップしたときにホバースタイルが有効になりつづけてしまう問題があります。

メディアクエリでPCサイズのみ効くようにすることもできますが、
ピクセルではなく以下のように書くことでホバー可能なデバイスのみホバーのスタイルを有効にすることができます。

@media (hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}

●参考

カテゴリ:

コメントする

検索

このブログ記事について

このページは、gravity-worksが2023年10月10日 15:36に書いたブログ記事です。

ひとつ前のブログ記事は「スマホでスクロールした際にslick.jsの自動再生が止まる」です。

次のブログ記事は「要素のアスペクト比を指定するaspect-ratio」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。