ハマログ

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

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

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

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

調べると簡単でした。

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

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

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

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


  yiting   2020年6月17日


関連記事

思わず見入ってしまう、面白い404エラーページを調べてみた!

先日、Twitterを見ていて、あるリンクを押したところこんなエラーページが表示…

8/6は何の日でしょう?(ヒント:きっと毎日みているあれです)

先日、気づいたのですが、なんと今年の8月6日は世界初のwebサイトが開設された日…

ブラウザ上でフォントを見比べる

今回は、フォントを一覧で確認できるツールをご紹介します。 デザインはもちろん、提…


← 前の投稿

次の投稿 →