レスポンシブデザインでスマートフォンのhoverを消したい

レスポンシブデザインを使用していると、スマートフォンの時だけは:hoverアクションの設定を無効にしたいという時があるかと思います。
スマートフォンで:hoverを使うと、ボタンを押した後もアクションが継続してしまうんですよね。
例えば、:hoverでボタンを少し大きくするようなアクションを入れた場合、ボタンにタッチした後もボタンが大きいままになってしまいます。
些細なことではありますが、やはり不格好なので気になります。

これを回避するには、スマートフォンでのタッチ動作の時のアクションは、:hoverではなく:activeを使用するといいです。
そうすることで、タッチした直後だけアクションを発生させることができます。
ユーザーにもボタンをクリックしたことがアクションで伝わりますし、不格好にアクションが継続することもなくなります。

アクセスするデバイスによって、:hoverと:actionを変える方法はいくつかありますが、今回はJavascriptでやってみます。
アクション用のクラスをPC用とSP用で分けます。
PC用のクラスの場合は、CSS側で:hoverアクションのみを付与します。
スマホ用のクラスの場合は、:activeアクションのみを付与します。
こうすることで、PCでアクセスした時は:hoverアクション、スマホの時は:activeアクションのみを発動させることができます。

JavaScript

// スマホ判定の基準width
const CRITERIA_SP_WIDTH = 480;

// デバイスによってアクションを変えたい要素のCSSクラスを入力してください。
const TARGET_CLASSES = [
    '対象のCSSクラス名1',
    '対象のCSSクラス名2',
    '対象のCSSクラス名3',
    '対象のCSSクラス名4'
];

// SP表示でない時、カスタムhoverクラスを付与
// HTML構築後に実行
window.onload = function() {
    // 画面幅によって付与するクラスを変更
    let AddSuffixName = '';
    if(window.innerWidth > CRITERIA_SP_WIDTH) {
        AddSuffixName = '__Interaction_For_PC';  // PC用
    } else {
        AddSuffixName = '__Interaction_For_SP';  // SP用
    }

    // ターゲットクラスに対してマウスオン(タッチ)時のクラスを付与
    TARGET_CLASSES.forEach((targetClass) => {
        let elems = document.getElementsByClassName(targetClass);
        elems = Array.from(elems);  // HTMLCollectionを配列に変換
        elems.forEach((elem) => {
            elem.classList.add(targetClass + AddSuffixName);
        })
    });
};

CSS

.[ClassName]__Interaction_For_PC:hover {
    /* PC用のアクション */
}
.[ClassName]__Interaction_For_SP:active {
    /* スマホ用のアクション */
}

ただし、このやり方だと要素が増えた時にJavascriptの動作が重くなります。
また、どうしてもCSSクラスが複雑になりがちです。
基本はCSSのmediaクエリで制御する方が良いと思います。