Streaming live at 10am (PST)

Hover Popup Animation - Mobile Bug


#1

Hello,

On my site: http://jslmarketing-lp.webflow.io/ there seems to be a bug in the mobile version only.

Near the middle of the page, I have 2 “Case Study” sections (first one has text that says “A well-known Electronics Manufacturing company in DFW”), when you hover over each case study, a div should pop up with stats. You can see it working properly on the Desktop/Tablet versions of the site.

In mobile however, I click the case study and then the div pops up and stays there for good…how do I fix this.

Thanks!
Rhami


Here is my site Read-Only: https://preview.webflow.com/preview/jslmarketing-lp?preview=950fc04c00bc0a64d2ecfa12763f6012


#2

Hi @rhami

Thanks so much for posting about this interactions issue.

I took look at your live site as well as the preview link and think I know the issue. Because this is a hover effect, it works wonderfully on desktop. However, when it comes to touchscreen devices there is no hover state. So the div will show when pressed instead, in which case there is no hover out to hide the div.

There may be a few different ways to approach resolving this but here’s one recommendation if you’d like to keep the hover effect on desktop:

  1. Duplicate this section
  2. Give one a combo class desktop and set it to display: none on touchscreen breakpoints (tablet and below)
  3. Give the other a combo class mobile and set it to display: none on desktop only
  4. Leave the desktop version as is
  5. On the mobile version, change the Mouse Hover trigger to a Mouse Click trigger and use the same animation

With this setup, users on mobile devices will click once to see the case study, and click a second time to hide it. You may need to add a bit of context text to guide the user into clicking the section, though.

There are definitely other ways to approach this – for example you can have a modal pop up rather than cover the other section — but the above is just one suggestion. Hope this helps! :bowing_man: