Hide a div on mouse-hover

I’m trying to white-out a certain area until mouse hover but as soon as I create a “Show/Hide” interaction this div starts flickering, I assume the reason is that it creates a loop because as soon as the div is gone physically the mouse “hovered out” and this creates an endless loop of a flickering div.

Any ideas on how to implement this properly?

By the way, there are buttons under this div and what I’m trying to do is get them out of focus a bit unless the user is hovering on this block.


An interaction doesn’t have to be triggered by the object it affects. Especially in your case.

So you can lay over any extra invisible DIV that you will use a a trigger to affect the visibility of another element. This trigger div won’t chnge in state so the hover trigger shouldn’t be trigged over and over.

Hey Vincent!
What about the buttons underneath?
I guess they won’t be clickable if there is a div on top (even if the div is invisible).
Any thought about that?

Edit: here is a screenshot to visualize what I’m trying to achieve: http://take.ms/Qshpy

Anyone? Is that impossible with WebFlow?

I’m actually trying to do this too. When I use a div as part of the interaction the flickering stops, but I cannot click on the layers underneath anymore. @FrozenGod did you figure this out?

Unfortunately I didn’t.
Still hope someone will answer or ill have to use some jQuery for this…