長押しを使用してタッチスクリーン上でホバー効果をシミュレートする方法?

長押しを使用してタッチ対応デバイスでホバー エフェクトをトリガーする

スマートフォンやタブレットなどのタッチ対応デバイスでホバー エフェクトを複製するにはでは、CSS と JavaScript を組み合わせて利用できます。その仕組みは次のとおりです。

HTML マークアップ

ホバー効果を適用したい要素に「hover」という名前のクラスを追加します。例:

<code class="html"><p class="hover">Some Text</p></code>

CSS スタイル

CSS を変更して、:hover クラスと .hover_effect クラスの両方にホバー効果を含めます。 .hover_effect クラスは、タッチ デバイスでのホバー効果をシミュレートするために使用されます。

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

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

JavaScript

JavaScript を使用して長押しイベントを検出します。 jQuery を使用した例を次に示します。

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

この JavaScript コードは、「hover」クラスを持つ要素に touchstart イベントと touchend イベントのイベント ハンドラーを追加します。タッチが開始または終了すると、タッチされた要素の hover_effect クラスが切り替わります。

追加の CSS

ブラウザがコンテキスト メニューを表示したり、タッチ時に確認を求めたりしないようにするためモバイル デバイス上の要素をタッチするには、次の CSS ルールを追加します:

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

Result

これらの要素を組み合わせることで、タッチ対応のホバー効果をシミュレートできるようになりました。目的の要素を長押ししてデバイスを選択します。この方法を使用すると、従来のマウスホバーを必要とせずに、ボタンやリンクなどのインタラクティブな要素を作成できます。

以上が長押しを使用してタッチスクリーン上でホバー効果をシミュレートする方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。