As delightful as the incremental step may be, it still provides an unsatisfactory experience*; an experience that could have been avoided had the original request for Hover events been honored.

Don't get me wrong, the introduction of States is a powerful addition, but it's a poor substitute for what many of us need. We need Hover (or more accurately, mouseover) to be a trigger for a destination type interaction.

I can see now, as I write this, that the mistake we made in the original request was using the word "Hover" rather than "MouseOver". It's understandable that one might interpret "Hover" to mean that we want things to always return to the former state on "MouseOut", but that's not necessarily the case. And, if we did, this could be rectified by also introducing the "MouseOut" as a separate destination type trigger.

States are excellent for small changes like hover states on buttons (it seems a waste to generate an entire duplicate artboard for every hover event on every button. So, again, kudos for the States feature.
However, anything more complex truly requires going to another artboard.

* - Until this nested states addition in October, we couldn't effectively produce dropdown overlays that would also trigger states such has menu hover selection. So, yeah, this kind of fixes the issue. Unfortunately, now, we have the issue of scope within the component.

Example [see attached]:
- We create an icon that, when hovered, produces an overlay or dropdown.
- Now we can hover over the new overlay and trigger a secondary hover event.
- So far, so good.
- But, the dropdown creates a larger rectangle which defines the scope of the entire component. This larger rectangle includes a good bit of area not visibly covered.
- In reality (on a web page), the hover event would be terminated if the cursor/mouse moves away from the original icon in any way other than to move over the newly generated overlay.
- In XD, the cursor can now move over a non-existent area above and to the right of the overlay without cancelling the hover event because that invisible area is considered part of the component.

In other words, the Hover state tracking is on what would be a <div> in HTML rather than on the icon image object.

It is very slow when i have hover on sequence of menu items.

Actually you can do this by nesting the components. It does not seem to work in the XD preview, but it works once you create the link and view it in the browser. https://xd.adobe.com/view/36b6a234-04e9-4332-bd88-15876ed26532-63e5/

No wonder why my side-nav flyout and rollover menu items aren't working — tap it is for the prototype for now but this definitely would be a great improvement.

Yes please!

That's also really important to me.
A Hover inside a click-event works finde. I am curious why it's not implemented for hover-events like that.

The hover state is a great addition but it is amazing how often the need for nested hovers comes up in a design. A simple example, you have a side navbar that expands on hover, then you hover over the nav times.

Currently, the "hover" state is implemented in a way that it is a temporary trigger.
I.e. you have "hover", but don't have separate "mouse enter" and "mouse leave" events.
So while the hover is active, nothing else can happen until it's no longer active.
This same logic is applied to all the animations across Xd. We need to have overlapping actions for hovers and overlays too, if we are to have realistic interactions, similar to how CSS functions.

This really needs to happen!! How can you not have nested hovers!? Something so simple which seems to be missing

Currently I have a component with 7 states. Its a left nav bar with a collapsed(default) state with 6 buttons to hover trigger the other states. I have each button set to hover trigger each corresponding state, which are flyout menus. I have already gone into each of the 6 states to reapply the hover trigger to each button. Currently, I can't just slide my mouse down the 6 buttons to trigger the states associated with them. I have to hover trigger one of the flyout menus, then I have to mouse off of the entire component, reseting it back to default(collapse) before I can then hover one of the other buttons to trigger a different flyout menu. I believe this to be a bug because changing the triggers to "taps" lets you slide down the menu and just click to change the state. Not sure why "hover" doesn't behave the same way. Video attached.

Hi 

This has frustrated me like you would not believe for the last few days! Been working on trying to figure this out and it's been driving me crazy. I have been working on a social share button, which on hover springs out (via auto animate) 3 social sharing options, facebook, twitter and instagram. That bit bit works very nicely.

The problem I can't work out is when I then hover my cursor over one of the social share icons, the hover state does not appear - even though when I come out of preview mode and flip into design mode and look inside the nested component I created for the social share buttons, there is a clearly a hover state included along with a default and a tap state. The default state look is correct and the tap state brings up the facebook overlay login screen which is also what I wanted but the hover state is a no show in preview mode, very frustrating.

At first I thought it might have been a bug with not being about to nest components inside other components, but even when I kept each of the components seperated from each other, still did not work.

Is there any work around for this, until Adobe get round to fixing this?

Im currently attending a UX/UI Bootcamp class from Georgia Tech and Im now disappointed on Xd. We need a nested hover to indicate good user interface design. Nest hover plus click to destined page does not work either. Please have a new update to include nested hover with add-on functions, it will make your Xd user have a much better design experience. See what I did there lol. Im graduating in a few days, maybe Xd can hire me :)

I have the same issue.Cant make a navigation bar with hover inside hover. I am trying to create a simple drop down menu appearing cause of a hover and all the sub -content highlighting themselves on further hovering.
It seems to be happening in a lot many sites ,which means it is being done...but how to do it in XD?!?!

The only way I have found to do something close to a "nested" hover state within a hover is to use a 2nd artboard. It's unfortunate as it breeds inconsistency when changes are made to other parts of a design and requires either redoing the hover state or making changes in multiple places or compartmentalizing your page into a bunch of components to it auto updates.

Has these been resolved now?

i have the same issue.

I need this for drop down menus. Thought it should do this for sure. Dissapointing.

I have a card element that I would like to have a hover effect, inside that card element is a download button that I would like to have a hover effect as well. It seems I can't get the download button to have a hover effect as long as it is inside of the card that already has a hover effect. whether the download button component is nested inside of the card component or not, it doesn't matter. As long as the download button component is on top of or or inside of the card component I can't get both of the hover states to work (see attached video clip). Please fix this Xd team! This seems more like a bug fix than a feature request.

Veerle - if you need an additional tap action, what I do is add an additional empty rectangle, the same size as the hover area, one level above the hover item.

Wes - this is how I build my buttons (screenshot). For the hover state, simply reveal the hover layer. Will work on every instance