Hover not working on mobile and tablet

Hello everyone

I made a hover-effect on desktop and thought, it would work on mobile and tablet with a tab gesture. But testing it out on the published link it does not work. Does anybody know why and how to fix this?

https://elviragreco-com.webflow.io/work


Here is my public share link: LINK
(how to access public share link)

Hi Elvira…It’s possible that the hover effect you created is not working on mobile and tablet devices because they don’t have a hover state like desktop device.
To fix this issue, you could try implementing a touch event to trigger the hover effect. One approach is to use JavaScript to detect touch events and then add or remove a class from the element to create the hover effect.Hope this will help you.

1 Like

Hey.

Can you give us your public share link? I think there should be a easy native solution.

With the inspect tool I can see, there might be some “display: none” issues.

Maybe you should differentiate between desktop and mobile devices when it comes to animations. On desktop you use your hover effect and on all smaller devices you put the animation on a click trigger.

As I said, just a guess. With the public share link we can examine the problem more exactly.

1 Like

Thank u!

Here the share-link: Webflow - elviragreco.com

The images / videos are set to display none and then the animation (hover on desktop and tab on mobiles) should set the display to show.

Hi.

I think the main problem is, that your “Container Bilder” is also set to “display: none” on tablet and mobile. If you set it to “display: block” your animation should work. Please try this. :slight_smile:

1 Like

It helped. Thank u! But as double tab does not work anyway I changed the whole system. Now I hav a Hover menu on Desktop and an accordion on mobile Devices. I think this makes more sense.