タッチ環境でのボタンのスティッキー ホバー エフェクトを防ぐにはどうすればよいでしょうか?

タッチ環境でのボタンのスティッキー ホバー エフェクトの解決

タッチ デバイスを念頭に置いてユーザー インターフェイスを設計する場合、ボタンのホバー エフェクトを管理すると、挑戦してください。この一見単純なタスクは、タッチスクリーンで発生する永続的なホバー状態により複雑になります。タッチ後もホバー効果が有効になり、ボタンが常に青い状態になります。

非効率なソリューション

no-hover クラス ontouchend を追加する、または documentElement で touch クラスを使用するなどの解決策は存在しますが、これらのメソッドには欠点があります。これらはパフォーマンスを低下させ、タッチスクリーンとマウスの両方の機能を備えたデバイスの処理に失敗する可能性があります。

とらえどころのない解決策

理想的な解決策には、タッチエンド時にホバー状態を削除することが含まれますが、ホバー状態を直接操作するのは難しいようです。他の場所にフォーカスしてもホバー効果は解除できず、手動で別の要素をタップすると無効化されるようですが、プログラムによるこのアクションのトリガーは依然として謎のままです。

画期的な進歩

2018 年の CSS メディア クエリ レベル 4 の登場により、これに対して革新的なソリューションがもたらされました。 dilemma:

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

この宣言は本質的に、「ブラウザが真のホバリング (マウスのような入力デバイスなど) をサポートしている場合は、ボタンがホバーされたときにホバー スタイルを適用します。」

この機能がないブラウザの場合は、ポリフィルが役に立ちます。このポリフィルを利用すると、上記の未来的な CSS は次のように変換できます。

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

ポリフィルからのクライアント側 JavaScript は、ホバー サポートを検出し、それに応じて my-true-hover クラスの存在を切り替え、エレガントな CSS を提供します。タッチ デバイスでのスティッキーなホバー効果の解決策。

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