▼
Streaming live at 10am (PST)

Issues with hover animation

#1

Hi Webflow,

I'm building a new site and I have an issue with the hover. I have a grid of products and when you hover over them i want to show a hover div and when you hover out this must be gone. But when I hover and move my mouse the hover effect disappears and appears all the time.

Ok this sounds maybe a bit strange but go to the site: http://serenity-website.webflow.io/ (heavy work in process;)) and hover over the products.

Here is my public share link: https://preview.webflow.com/preview/serenity-website?preview=2f20693375275736f34def00f0cffba4

#2

What's happening here is that the interaction is on the product element. When the description div appears it covers the product div, this means you are technically not hovering the product div anymore and has soon as you move your mouse the browser realizes this and hides the description. You are then hovering the product div again and it appears again. This process makes it look like it's flashing.

The quick fix is to remove the interaction from the product element and place it on the column. Make sure to switch the settings from sibling to nested.

hope that helps :slight_smile:

#3

Thanks for the fast and complete answer @AlexN. That did the trick!

closed #4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.