タッチ デバイスでホバー エフェクトをシミュレートするにはどうすればよいですか?

タッチ デバイスでのホバー効果のシミュレーション

タッチ対応デバイスの普及により、ホバー効果などの古典的なマウス インタラクションを複製できます。挑戦です。この問題はマウス入力にのみ適用されるため、CSS のみを使用してホバー効果を作成しようとすると発生します。幸いなことに、JavaScript を組み込んで CSS を変更するという解決策があります。

シミュレーションの実装

ロングタッチ時のホバー効果をシミュレートするには、次の手順に従います。

1. ホバー効果を適用する HTML 要素に「hover」というクラスを追加します。
2. タッチ操作を有効にするには、次の JavaScript コードを追加します。

$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

3. CSS で、ホバー効果定義を変更して、「.hover_effect」クラスを含めます。 :

element:hover, element.hover_effect {
    rule:properties;
}

4. 必要に応じて、次の CSS を追加します。タッチ時のブラウザ選択を無効にするには:

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

説明

このソリューションは、タッチ時にトリガーされる 'touchstart' および 'touchend' イベントを利用します。有効なデバイス。ユーザーの指が画面に触れると、「touchstart」イベントがトリガーされ、「hover」クラスを持つ HTML 要素に「hover_effect」クラスが追加されます。タッチが終了すると、「touchend」イベントが発生し、「hover_effect」クラスが削除され、ホバー効果を効果的にシミュレートします。

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