Does hover work on mobile? (or how to make it work)

[richardnash]

I am asking about the hover interaction working on a mobile device properly…

on a desktop the proper behavior is for an image to exist, then when the mouse crosses over the image, stuff starts to appear.

on mobile, i want the image to appear, then when the user taps the image, stuff appears over it, then when the user taps again, new page is visited.

what i have noticed in the past is that on mobile, when the user taps on an image the stuff appears and the link is visited together, and they are not separate tap actions.

Is there any way to create a hover effect on desktop that becomes a tap twice effect on mobile?

I hope that makes sense :-/

[samliew (webflowexpert.com)]

You can use custom JavaScript. First click is to add a class and prevent the normal link click behavior.

var Webflow = Webflow || [];
Webflow.push(function() {
  $(document).on('click', '.button', function() {
    if(!$(this).hasClass('active')) {
      $(this).addClass('active');
      return false;
    }
  });
});

[richardnash]

So this code will only be triggered on mobile devices, and not the laptop/desktop? I want the mouse hover behavior on laptop/desktop, but have the tap twice behavior on mobile and touch enabled devices…

[samliew (webflowexpert.com)]

if($(window).width() < 768 && !$(this).hasClass('active')) {