[解決済み] タッチデバイスでボタンのホバーエフェクトがベタベタしないようにする方法

質問

私は、常に表示されている前と次のボタンがあるカルーセルを作成しました。これらのボタンにはホバー状態があり、青くなります。iPadなどのタッチデバイスでは、ホバー状態がスティッキーなので、ボタンをタップした後も青いままです。私はそれを望んでいません。

• を追加することができました。 no-hover クラス ontouchend を各ボタンに適用し のようなCSSを作成しました。 button:not(.no-hover):hover { background-color: blue; } しかし、これではパフォーマンス的にかなりまずいでしょう。 Chromebook Pixelのようなデバイスを扱うことができます。 タッチスクリーンとマウスを正しく使うことができます。

• を追加することができました。 touch クラスを documentElement を作成し、私のCSSを このように html:not(.touch) button:hover { background-color: blue; } しかし、これも、タッチ操作と マウス

私が望むのは、ホバー状態を削除することです。 ontouchend . しかし、それは不可能のようです。他の要素にフォーカスしても、ホバー状態は解除されない。別の要素を手動でタップすると削除されますが、JavaScript でそれをトリガーすることはできないようです。

私が見つけた解決策はすべて不完全なようです。完璧な解決策はないのでしょうか？

解決方法は？

のこの部分は CSS メディアクエリ レベル 4 は、現在では 2018年から広く実装された の場合、これを使用することができます。

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}

英語では "ブラウザが適切/真/実/非エミュレートホバリングをサポートしている場合（例えば、マウスのような主要入力デバイスを持っている場合）、次の場合にこのスタイルを適用します。 button の上にカーソルを置くと、""

これが実装されていない（あるいはこの元回答の時点では実装されていなかった）ブラウザの場合。 ポリフィルを書きました に対応するためです。これを使うと、上記の未来的なCSSを変形させることができます。

html.my-true-hover button:hover {
    background-color: blue;
}

(のバリエーションです。 .no-touch テクニック) そして、ホバリングのサポートを検出する同じポリフィルのクライアントサイドのJavaScriptを使用することで、ホバリングのサポートがあるかどうかを切り換えることができます。 my-true-hover クラスは、それに応じて

$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});