CSS と JavaScript を使用してタッチスクリーンにホバー効果を実装するにはどうすればよいですか?

タッチスクリーン上でホバー インタラクションをエミュレートする方法

Web 開発の領域では、タッチ対応デバイス上でホバー エフェクトをシミュレートすることが長引いています。チャレンジ。しかし、心配する必要はありません。CSS と JavaScript を組み合わせて簡単に実行できる賢いソリューションが存在します。

フォントの色を変更するホバー効果など、いくつかのテキストとスタイルが適用された要素があると想像してください。このホバー機能をタッチ スクリーン デバイス上のタッチ イベントに拡張したいとします。その方法は次のとおりです:

ステップ 1: CSS を調整する

標準の「:hover」セレクターを使用する代わりに、「hover_effect」という新しい CSS クラスを作成します。 。」このクラスは、ホバー スタイルの適用を担当します。

<code class="css">element:hover, element.hover_effect {
    color: red;
}</code>

ステップ 2: JavaScript を使用してタッチ イベント リスナーを追加する

次に、jQuery を使用してリッスンします。ホバー可能にしたい要素のタッチ イベントの場合。

<code class="javascript">$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});</code>

このスクリプトは、「hover」クラスを持つ要素でタッチが開始または終了すると、事実上「hover_effect」クラスが切り替わることを保証します。ホバー状態をシミュレートします。

ステップ 3: ブラウザーの望ましくない動作を防止する (オプション)

ユーザー エクスペリエンスを向上させるには、この CSS スニペットを追加して、ブラウザーがメニューを表示しないようにします。または要素のコピーまたは選択に関連するプロンプト:

<code class="css">.hover {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}</code>

これで完了です。 CSS を変更し、単純な JavaScript スクリプトを実装することで、タッチ スクリーン上でホバー効果をシームレスにトリガーでき、ユーザーにすべてのデバイスで一貫した直感的なエクスペリエンスを提供できます。

以上がCSS と JavaScript を使用してタッチスクリーンにホバー効果を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。