Adobe XD prototyping - hover inside components doesn't work when cursr moves from one area to second

Question

I've got this strange issue when prototyping horizontal hover mega menu. I've got currently two menu items and they should display mega menu on hover. Strange thing is - it's working only when i move cursor out of component and go back - when i'm trying to hover one after another - nothing happens.

Here is the video: https://youtu.be/T9P0lyL3fgg

I was already trying by creating this with two approach like here - with seperated hover area inside component that leads to different state of same main component:

https://tomb.pl/screen.png

And in the second approach i've created two seperated components for every menu item that should go to it's own hover state:

https://tomb.pl/screen-02.png

Unfortunetly - both approaches works like in the video showed above. Which is strange - cause as far i understand that the second one can make the hovered component above another but in the first one - they are totally seperated areas.

Thanks

AkinGn · Answer

Hi @tormee, I'm not sure what's causing the issue in your example but first I thought it can be because of not having any space between two components for engine to realize there's a hover off happening and then re-hover on but when I tried to simulate the situation here: https://xd.adobe.com/view/c9cb38d5-484c-4989-a4a9-ee33580723a7-9c98/ and used a block text box for the link text and then created a second one placed immediately after the first one it, looks like it works, as you see if you try. I'm also adding the sample file here if you want to compare and examine: https://www.dropbox.com/s/oxgn46c80hiskd8/components-hover-test.xd?dl=0 Hope this helps!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded