Skip to main content
T
tormee
Known Participant
August 23, 2022
Question

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

  • August 23, 2022
  • 1 reply
  • 1319 views

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

This topic has been closed for replies.

1 reply

AkinGn
Community Expert
AkinGnCommunity Expert
Community Expert
August 23, 2022

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!

T
tormeeAuthor
Known Participant
August 24, 2022

@AkinGn and i understand why this example don't work - because if we create this seperate components much bigger they overlay each other on hover - so the component below is not hoverable anymore.

But i can't understand why first example doesn't work - if you got two seperate areas of hover in one component.
Maybe it's because it doesn't trigger other hover when already on hover.

AkinGn
Community Expert
AkinGnCommunity Expert
Community Expert
August 24, 2022

"Maybe it's because it doesn't trigger other hover when already on hover."  Exactly! Overlapping components can cause problems for hover interactions, I suggest not overlapping those in order to create a flawless hover demonstration. 

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices