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
  • 1316 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

I can't figure out the solution for now - i believe that XD should have additional functionality of adding multiple hover states.


Hmm as long as we design in 2D, an element can have a width, a height and one hover state right 😉 You're either over an element or not, so it doesn't sound possible. What I suggest is, instead of adding states to the big navigation bar, making a "link" component in the menu and adding hover to that inner link component, to "Courses" instance of that component and to "Locations" instance of that component in your case. (and the "mega menu" can be another inner component to keep things design system friendly/flexible/maintanable etc 😉) That's how I did in the example file I created, as you see, the outer navigation bar component doesn't have any states for hover, I added hover states to "Link 1" and "Link 2" components. Let me know if this is not clear enough, I can prepare a screencast for you, happy creating!

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