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

[tormee]

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]

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!

[tormee]

Hi @AkinGn - thanks for the reply.
But unfortunetly your example is not exactly like mine. In yours two inside components are smaller and they not overlay each other - when i made them bigger - issue still persist. Take a look:
https://xd.adobe.com/view/fe05ae98-777d-49c6-959e-5b7ff4bb331f-ab56/

[tormee]

@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]

"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. 

[tormee]

Yes - but the thing is - in this particular scenario - it's impossible to not overlap second component on hover.

The solution i've came up with is to create in main component two seperate ractangles (not components - that are totally seperated from each other). And then - when you hover over the ractangle it should go to specific state of main component with hover trigger on that ractangle. But the issue is - it doesn't work either.

You can investigate the file if you like here: https://we.tl/t-bXYioJnFIh

[AkinGn]

I understand, when I get the chance of examining the file I'll update you. 

Edit: Right now I couldn't find a way of achieving it, other than completely going out of the boundaries of the navigation component, to new hover to be recognized. Or, as in my example, using hover states as states of inner/link components own states, not the main navigation's (as you mentioned, we're already on its hover state so we can't expect it to change to another one.) It looks like this is the best solution to have the navigation as a component and have multiple hover states (of links).

If you come up with any other solution, please update me! 🙂

[tormee]

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

[AkinGn]

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!

[tormee]

Yes i understand of the file that you've prepared - but in your case width of the inner components got less width so they don't overlay each other and the problem is - i would like to keep the full width of the hovered mega menu but when i do this components starts to overlay and this doesn't work (maybe adding a possibility to XD of changing z-index on hover or as i mentioned earlier - nesting hover states will fix the issue).

I even try same approach to your example but with two seperate components outside the main component (just close to each other) but this doesn't work either cause they are still overlaying each other and only component with higher z-index works.

So my guess is - there is no solution for this in the current Adobe XD functionality.
It'll be nice to add this posibility - cause i believe that this is common scenario. I'll try to make some workaround but for now i don't see that possibility. 

So can i just ask - where can i ask for adding this functionality to the software?

[tormee]

Making Adobe XD functionality more like HTML/CSS behave - will be a great future that will expand possibilities of the software to the maximum (like changing CSS values inside XD (for example - z-index properties, pointer-events, etc.). It will make software much more convinient and ahead of competition.

[AkinGn]

Hi, you can create feature requests here: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests 

Instead of z-index, I tried to change layer order on hover in this video for bringing the hovered thumbnail image in front of the others, but in order to do that first we need hover to be recognized, that's the problem that we're having here right. If you still want to check the gallery hover solution you can see it here, maybe you can find a way to implement in your design: https://www.youtube.com/watch?v=VmHoCJ3eqhU&t=222s Let me know how you resolve this, if I can find any chance to investigate further and find a solution, I'll let you know!

Edit: one idea that I came up with now is, maybe keeping the "active link" indicator in the same component, but since the full width mega menu prevents XD from identifying the new hover, maybe including that as an "overlay" in your navigation menu, brought from a different artboard? I'd also try that!

[tormee]

This is interesting idea - i'll check it out tommorow and let you know.

[tormee]

Hi, unfortunetly i cannot find a way to implement this - i was trying some different aproaches - like creating nested components + adding hover states to change components z-index on hover - but it doesn't work cause XD still doesn't let me change to other hover component.

One think i came up with is to change the shape of a component so it doesn't overlay lower z-index component.
Question is - is that if this even possible? And if yes - how to achieve that?

I would like to recive something like this: