Customizing interactions for touch screens

[yogeshs101 (Yogesh Sharma)]

A hover interaction on a touch screen requires tapping to activate the interaction. Is there a way to have the hover work only on non-touch/desktop screens, and make it be completely inactive/not work on touch screens.

The use case is here: http://lettuce.webflow.io/profilepublic#farm - there’s a hover, and then a click interaction on the little image divs. On touch devices it becomes a touch and touch. What we want is to make the hover inactive on touch devices, so that its only one touch to get to the popup, bypassing the label that comes on hover on desktop.

Thank you for your help!

---

Here is my public share link: https://preview.webflow.com/preview/lettuce?preview=47a572ddba5a19401e1f3d9e072a8b95
(how to access public share link)

[Waldo (Waldo Broodrÿk)]

Hey @yogeshs101 Could you please update your post with some more information so we can help you faster? Things like your read-only link & screenshots really helps us to help you faster

How to share a read-only link:

Share a read-only link | Webflow University

Thanks in advance!

[Waldo (Waldo Broodrÿk)]

Hey @yogeshs101 with the way that the interaction is built out at this time you will not be able to remove the interaction on mobile.

Instead what you could try is the following:

1. Remove the interaction for the hover step for Plant Variety

2. Remove the interaction initial display setting for the interaction on the Plant variety heading

3. Try the follow styles on the Plant Variety class (see the style panel):
   

   

4. Change it’s static state to an opacity of 0%

5. Add a Transition of 250ms for Opacity:
   

   

6. Go to the Hover State of the element and change it’s opacity to 100%
   

   

7. Now go to the tablet breakpoint and either remove the hover style or set it to an opacity of 100%

​Please let me know if this solves the problem, if not, I’m happy to help further