ハマログ

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

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

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

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

調べると簡単でした。

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

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

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

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


yiting   yiting   2020年6月17日


関連記事

Adobe XD おすすめプラグイン5選

こんにちは、入社1ヶ月になりましたyitingです。 一年前程からAdobe X…

illustratorのよく使う機能

今回はよく使うillustrator機能のお話。 普段から使用している方は「知っ…

コーポレートサイトリニューアル

こんにちは、かねこです。 つい先週、かれこれ2〜3年使っていたコーポレートサイト…


← 前の投稿

次の投稿 →