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

タッチ対応デバイスのボタン上のスティッキー ホバー効果を削除する方法

永続的なナビゲーション ボタンを使用してカルーセルを作成する場合、一般的な問題が発生します。タッチデバイス。ボタンのホバー状態は通常青色で表示されますが、「スティッキー」になり、タップした後でもアクティブなままになります。この問題に対処するためのいくつかのアプローチが検討されています。

• タッチエンドにホバーなしクラスを追加すると問題は解決できますが、パフォーマンスに影響を与え、タッチとマウスの両方を備えた Chromebook などのデバイスで互換性の問題が発生する可能性があります。
• documentElement にタッチ クラスを実装し、それに応じて CSS を変更することでも問題に対処できますが、タッチとマウスの両方を備えたデバイスには最適ではありません。 support.

理想的な解決策は、タッチエンド時にホバー状態を削除することです。ただし、これを直接行う方法はありません。別の要素にフォーカスしてもホバー状態は解除されません。別の要素を手動でタップすることは可能ですが、JavaScript でこのアクションをプログラムでトリガーすることは依然として課題です。

この問題を効果的に解決するには、CSS メディア クエリ レベル 4 の最近の開発を活用できます。

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

この CSS は基本的に、「デバイスが真のホバリングをサポートしている場合 (たとえば、マウスのようなプライマリ入力デバイスがある場合)、ボタンのホバリングを適用します」と述べています。 style."

この機能がまだ実装されていないブラウザの場合、JavaScript ポリフィルを利用してホバー サポートを検出し、カスタム クラスを切り替えて、条件付きでホバー スタイルを適用できます。

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

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

このソリューションは、マウス入力を使用するデバイスで必要な美観を維持しながら、タッチ デバイスのスティッキーなホバー効果を効果的に排除します。

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