タッチ対応ブラウザでロングタッチ時のホバー効果を複製するにはどうすればよいですか?

タッチ ジェスチャーによるホバー効果のシミュレーション

シナリオ:

CSS を使用してスタイル設定された HTML 要素を含む Web ページがあります。具体的には、「ホバー」効果を持つ要素があり、カーソルを上に置くと色が変わります。ただし、タッチ対応ブラウザでは、ロングタッチのこの動作を再現する必要があります。

解決策:

これを実現するには、次の手順に従います。

1. CSS を変更します: ホバー効果を有効にする HTML 要素に次のクラスを追加します:

<code class="css">p {
  color:black;
}

p:hover, p.hover_effect {
  color:red;
}</code>

これにより、「hover_effect」 " クラスは、":hover" 疑似クラスのスタイルを複製します。

2. JavaScript を追加します: jQuery を使用して次のコードを実装します:

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

3. ブラウザのデフォルトの動作を防止する: ブラウザのデフォルトのタッチ操作 (コンテキスト メニューなど) を防止するには、次の CSS をスタイル シートに追加します:

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

この変更の組み合わせにより、対象となる要素でのタッチ アンド ホールド ジェスチャが有効になり、タッチ対応ブラウザのホバー イベントをシミュレートできます。

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