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

タッチ デバイスのボタンに対するスティッキー ホバー効果の防止

デスクトップとタッチ対応デバイスの両方のユーザー インターフェイスを作成する場合は、次の点に対処することが重要ですボタン上のスティッキーホバーエフェクトの問題。タッチ デバイスでは、通常要素の背景色の変更によって示されるホバー状態が、ボタンを放した後でも動かなくなることがあります。

スティッキー ホバー効果を防ぐ解決策

これに対処するためにいくつかの解決策が提案されています問題:

• ホバー クラスの削除: この方法は単純ですが、非効率的である可能性があり、タッチ入力とマウス入力の両方をサポートするデバイスではうまく機能しない可能性があります。
• タッチ クラスの追加: この手法には、混合入力を持つデバイスが考慮されていないため、制限もあります。

推奨される解決策

理想的な解決策は、タッチエンドのホバー状態を削除することです。ただし、これは、別の要素にフォーカスしたり、JavaScript で手動タップをトリガーしたりするなどの従来の方法では実現できないようです。

メディア クエリ レベル 4 ソリューション

しかし、CSS の実装が普及したことで、 2018 年以降のメディア クエリ レベル 4、より洗練されたソリューションがありますavailable:

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

この CSS ルールは、ブラウザーが真のホバーリング (通常はマウスのような主入力デバイスの使用を示す) をサポートする場合、ホバー スタイルがボタンに適用されることを示します。これにより、タッチ対応デバイスでのホバー効果が効果的に防止されます。

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

CSS メディア クエリ レベル 4 をサポートしていないブラウザの場合、ポリフィルは同様のソリューションを実装するために使用されます:

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

ポリフィルからの JavaScript コードを切り替えることができますホバリング サポートに基づく my-true-hover クラス:

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

このソリューションを使用すると、開発者は、タッチ対応デバイスでのスティッキー ホバー効果を防止しながら、デスクトップ ブラウザでボタンに適切なホバー効果を確実に与えることができます。

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