相模原市WEBサイト制作・カスタム・修復

Blog

2016/01/17

css

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

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

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

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

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

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

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

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

«前の記事

一覧に戻る