☰

タッチ対応ブラウザでタッチによるホバーをシミュレートするにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript html css hover touch
タッチ対応ブラウザでタッチによるホバーをシミュレートするにはどうすればいいですか? 質問する

次のような HTML があります:

<p>Some Text</p>

次に、次のような CSS をいくつか示します。

p {
  color:black;
}

p:hover {
  color:red;
}

タッチ対応デバイスで長押しするとホバーが再現されるようにするにはどうすればよいですか? マークアップを変更したり、JS を使用したりすることはできますが、これを行う簡単な方法が思いつきません。

ベストアンサー1

わかりました。解決しました。CSS を少し変更し、JS を追加するだけです。

jQuery を使用すると簡単にできます:

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

英語: タッチを開始または終了するときに、クラスをhover_effectオンまたはオフにします。

次に、HTML で、これを動作させたいものにクラス hover を追加します。CSS で、次のインスタンスを置き換えます。

element:hover {
    rule:properties;
}

と

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

さらに便利にするために、これも CSS に追加します。

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

ブラウザが画像のコピー/保存/選択などを要求するのを停止します。

簡単！

おすすめ記事