タッチ デバイスのボタンのスティッキー ホバー エフェクトを排除するにはどうすればよいですか?

タッチ デバイスのボタンのスティッキー ホバー エフェクトの防止

タッチ デバイスのボタン上の永続的なホバー状態は迷惑となる場合があります。これに対処するために、さまざまな解決策が提案されていますが、どれも完全に満足できるものではないようです。 1 つのアプローチには、タッチ エンドに「ホバーなし」クラスを追加することが含まれますが、これはパフォーマンスに悪影響を及ぼし、ハイブリッド デバイスを考慮していません。別のオプションは、ドキュメントに「タッチ」クラスを追加することですが、これもタッチ機能とマウス機能の両方を備えたデバイスでは失敗します。

理想的な解決策: CSS メディア クエリ レベル 4

CSS メディア クエリ レベル 4 の出現により、より洗練されたソリューションが登場しました。

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

このメディア クエリは、真の/エミュレートされていないホバー サポートを備えたブラウザ (マウスを備えたデバイスなど) を特にターゲットにしています。のような入力メカニズム)。このようなブラウザのボタンには、青いホバー効果が表示されます。

レガシー ブラウザ用のポリフィル

この機能のないブラウザの場合は、真のホバー サポートをシミュレートできる JavaScript ポリフィルがあります。

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

ポリフィルはホバリング機能を検出し、それに応じて「my-true-hover」クラスを切り替えます。

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

この CSS と JavaScript の組み合わせにより、ホバー効果が両方で完璧に動作することが保証されます。最新のタッチ デバイスと従来のタッチ デバイス。

以上がタッチ デバイスのボタンのスティッキー ホバー エフェクトを排除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。