Blog

HOME > Web > css > 【CSS】スマートフォンのhoverについて

【CSS】スマートフォンのhoverについて

2016/01/17

css

スマートフォンのみヘッダーにメニューボタンをつけて、
タップでメニューが表示される仕様にしていますが、
どうもhoverを使用すると反応が遅れるということが分かりました。

今まではcssでa:hoverがすべてに対応するように指定をしていましたが、
とりあえず、ヘッダーのみhoverを外すことで反応が良くなりました。

例えば、ヘッダー下のコンテンツをmainで指定している場合です。

    a:hover img{
        /*color:#ff0000;*/
    }

    #main a:hover img{
        color:#ff0000;
    }

わかりやすいようにコメントアウトしていますが、
削除しても大丈夫です。

あと、PCの挙動も考えて個別に指定をしたほうがいいかもしれないです。

とりあえず、CSS修正で対応しましたが、
このような方法もあるようなので、今後、試してみたいと思います。

参考サイト
スマホだと反応が遅れる :hover を心地良くする方法

ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ