How to disable a hover interaction on mobile

Hi, I have created a hover interaction to reveal some social icons and name, but I want them to be shown all the time on mobile since there is no mouse hovering. How can I do that?

Thanks.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @Sebasgaes ,
depending on how you made your Hover animation; state, ix1 or ix2, if its the two latter, i would just make it not active on Tablet-Landscape-Mobile. Then play with the styling panel while being on Tablet mode as changes only cascades down.

tell me how it goes,
MRV

Hi MRV, I made it with the interactions 1, almost two years ago. I don’t see where I can make it not active in Tablet-Landscape-Mobile like with other elements. Could you tell me where can I find it?

thanks,

That functionality does not exist in IX1. Your simplest solution would be to duplicate the elements, and make a set that is visible only on mobile (deactivating the originals on mobile) and does not have the interactions applied.

Hi, So if I do it with ix2 is it possible?

Yes. If you do it with IX2, you can just look for this row of icons and deactivate whatever you’d like to not have the interactions.

42%20PM

1 Like

Yes the best practice is what @Cricitem just said. Been so long didn’t play with ix1, forgot what it was impossible :sweat_smile:
With Ix2 yes definitely possible, when you open it, at the bottom you get the possibility.

Thanks, l’ll re-do it with ix2.

1 Like

similar issue here - I have used the icons mentioned to disable hover interactions on tablet and mobile but the text on those disappears??
I think I have done this correctly? But as the initial state on the text is 0% opacity is that the reason? - but this has been set up in the interaction that has been disabled - can’t seem to work this one out.

Any help would be great guys

Here’s my read only link: https://preview.webflow.com/preview/danielcobbdesign?preview=2b7e88c6308f2a9185a65c8699c5511b