タッチデバイスでホバー効果を複製するにはどうすればよいですか?

タッチ デバイスでのホバー動作の複製

タッチ対応デバイスでのホバー効果をシミュレートすると、デスクトップ ブラウザでの同様の操作を模倣し、ユーザー エクスペリエンスを向上させることができます。 。これを実現する方法は次のとおりです。

:hover の CSS ルールをタッチ イベントのカスタム CSS クラスと結合します。

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

HTML で、「hover」クラスを要素に割り当てます。ホバー効果をトリガーしたい。

タッチ イベントでのホバー動作をシミュレートするには、次の JavaScript コードを追加します。 jQuery:

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

ユーザーが「hover」クラスの要素に触れると、イベント リスナーは「hover_effect」クラスを切り替えます。これにより、CSS :hover ルールが複製されます。

Toブラウザのデフォルトのアクション (保存や選択など) を無効にするには、次の CSS を追加します。ルール:

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

この追加により、ユーザーが要素に触れたときにブラウザーがコンテキスト メニューを表示したり、画像を保存するかコピーするかどうかを尋ねたりすることがなくなります。

CSS と JavaScript を組み合わせると、タッチ対応デバイスにホバーのようなエクスペリエンスを効果的に作成でき、ユーザーが Web コンテンツをより簡単に操作できるようになります。

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