タッチ対応デバイスでホバー効果をシミュレートするにはどうすればよいですか?

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

タッチ対応デバイスには、マウスの従来のホバー機能がありません。これは、CSS のみを使用してホバー効果を複製しようとするときに問題を引き起こします。

この問題に対処するには、CSS を変更し、JavaScript を組み込む賢明な解決策が必要です。 jQuery を使用して、次のスニペットはタッチ開始イベントとタッチ終了イベントでクラスを切り替え、ホバー状態を効果的にシミュレートします。

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

HTML で、ホバーする要素にクラス「hover」を追加するだけです。

CSS ホバー ルールの効果を模倣するには、次の構文を使用するように CSS を変更します。

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

さらに、ブラウザがホバー効果を妨げないように次の CSS を追加します。

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

これらの変更により、タッチ対応デバイスはホバー効果をシミュレートし、より直感的なユーザー エクスペリエンスを提供するようになりました。

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