[解決済み] タッチ対応ブラウザで、タッチによるホバーをシミュレートするには？

質問内容

このようなHTMLで

<p>Some Text</p>

次に、こんな感じのCSSをいくつか。

p {
  color:black;
}

p:hover {
  color:red;
}

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

どのように解決するのですか?

OK、解決しました! CSSを少し変更し、JSを追加する必要があります。

jQueryを使って簡単に。

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

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

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

element:hover {
    rule:properties;
}

をもって

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

さらに便利なことに、これをCSSにも追加してください。

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

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

簡単!