2

I have a "follow" button that has "Follow" which when clicked, changes a class and the text visible is "Following". On hover this changes to "Unfollow".

Works just fine. On mobile (phone), clicking it seems to lock it into the "hover" state. As a result, it completely bypasses "Following" and shows "Unfollow". If I tap somewhere else on the screen, it "fixes" itself.

Is there any way to make this happen automatically? $('body').click() did nothing for me...

Kara
  • 6,115
  • 16
  • 50
  • 57
Kaitlyn2004
  • 3,879
  • 4
  • 16
  • 16

1 Answers1

0

You can use the touchstart/touchend events in jquery. If you are using only CSS, I don't know of a solution, but what you can either bind your normal functions to touchstart/touchend events in addition to hover events or do something like the following.

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

This just make your "hoverClass" change the button as you need to via CSS. I hope that is clear enough. Basically, touchstart/touchend are similar to hover, but as far as I know not accessible via CSS exclusively.

Leeish
  • 5,203
  • 2
  • 17
  • 45
  • Yea, that won't work because I don't have a "hoverclass" - it's just styling based on a:hover. Tapping the button causes hover on mobile... – Kaitlyn2004 Jan 12 '13 at 17:23
  • What I am saying is in your CSS stylesheet, add a class declaration called hoverClass or whatever you want, and make that class match the a:hover declaration. Then touchstart/touchend will match what your CSS does on the desktop with hover. – Leeish Jan 13 '13 at 04:19
  • The answer (http://stackoverflow.com/questions/2290829/how-to-force-a-hover-state-with-jquery) to this question is exactly what you are looking for. – Leeish Jan 13 '13 at 16:28