ハマログ

株式会社イーツー・インフォの社員ブログ

iPhoneでCSS疑似要素が効かない解決法

スマホにはCSSの擬似要素:hoverの概念はないですが、ボタンなどをタップした時にスタイルが一瞬変わると思ってましたが、iPhoneには適用されないことを先日知りました。

Androidユーザーなので、いつもMacのSafariの「レスポンシブ・デザイン・モードにする」で検証していますが、Safariで反映してるのでできたと思いましたが、実機で確認するとダメでした。

調べると簡単でした。

<body ontouchstart="">
...
</body>

これで全部の要素が効くようになります。
特定の要素もに効かせたい場合はその要素のみ付ければ大丈夫です。

ちなみにスマホで擬似要素の動作は
:hover → タップしたら適用される、別のところをタップしたら解除される
:active → タップしたら一瞬適用される
:focus → 適用されないようです

UI/UXは細かいところまでこだわるほど、ユーザーの使いやすさに繋がるので、今後もセンスを磨いていきたいと思います(^o^)/

  yt   2020年6月17日


関連記事

【EC-CUBE4】好きな場所にyoutube動画を埋め込む

やりたいこと 前回「【EC-CUBE4】カテゴリナビをサイドメニューにカスタマイ…

Adobe MAX 2019に行ってきた

12月3日にパシフィコ横浜にて開催されたAdobe MAX 2019に参加してき…

JavaのJDK/JREをアップデートしたらEclipseがerrorcode=13で起動しない

JavaのJDK/JREをアップデートしたらEclipseが起動しなくなりました…


← 前の投稿

次の投稿 →