css - モバイルでボタンのホバー状態を無効にする方法は?

Question

「フォロー」ボタンがあり、クリックするとクラスが変更され、表示されるテキストは「フォロー中」になります。ホバーすると、これが「フォロー解除」に変わります。

うまく動作します。モバイル（電話）では、クリックすると「ホバー」状態にロックされるようです。その結果、「フォロー中」を完全にバイパスし、「フォロー解除」と表示されます。画面の別の場所をタップすると、それ自体が「修正」されます。

これを自動的に行う方法はありますか？$('body').click()私のために何もしませんでした...

Answer 1

jquery で touchstart/touchend イベントを使用できます。CSSのみを使用している場合、解決策はわかりませんが、通常の機能をホバーイベントに加えてタッチスタート/タッチエンドイベントにバインドするか、次のようなことを行うことができます.

$('.button').bind('touchstart',function(){
    $(this).addClass('hoverClass');
});
$('.button').bind('touchend',function(){
    $(this).removeClass('hoverClass');
});

これは、必要に応じて CSS 経由で「hoverClass」にボタンを変更させるだけです。それが十分に明確であることを願っています。基本的に、touchstart/touchend は hover に似ていますが、私が知る限り、CSS だけでアクセスすることはできません。