レスポンシブサイトでSP表示の時に:hoverを打ち消す

レスポンシブサイトではPC版の時にhoverでボタンのスイッチがへこんだり、色が変わったりします。
ですが、SP版の場合触れた部分がhover状態になり、それが指を離しても戻ってきません（hoverが解除されません）
例えば、ページをスクロールしようとしてページ内にあるボタンを触ってしまったら凹んだままになってしまいます。これでは不格好です。その解決方法を3つほど紹介します。

上書きして消す

これは既にhoverを設定してしまっていた場合にhoverを消す方法はないので上書きして元のスタイルを当てる必要が有ります。

.btn {
    background: blue;
}
.btn:hover {
    background: skyblue;
}

@media screen and max-width(480px) {
    .btn:hover {
    /* hoverが付いていない時と同じスタイルを当てる */
        background: blue;
    }
}

問題点

ただし、今はbackgroundのみの変更ですんでいますが、ボーダーの色や、幅、高さなどhover時に変更した箇所が増えれば増えるほど、またhoverした要素が多ければ多いほど打ち消しの記述が増えていきます。

hover用のクラスを使う

bodyにhover用のクラスをつけて、javascriptでスマホサイズの時にhoverを外す指定をする。

.btn {
    background: blue;
}
.hover.btn:hover {
    background: skyblue;
}

var hover = function() {
    $(window).on('load resize orientationchange', function() {
        if($(window).width() <= 480) {
            $('body').removeClass('hover');
        } else {
            $('body').addClass('hover');
        }
    });
}

$(function(){
    hover();
});

このやり方では、javascriptの記述が多少増えますが、hover打ち消しのための記述が必要ありません。

SP版から作成する

.btn {
    background: blue;
}
@media screen and min-width(480px) {
    .btn:hover {
        background: skyblue;
    }
}

min-widthでは指定したサイズ以上で適用されるのでおおよそスマートフォン以上の大きさの時のみhoverがつきます。

まとめ

レスポンシブサイトを作成するならsp版から作成するのがコードも短くスッキリすると思います。
＊ただし、あくまで今回はhoverについてのみの話です。