Hover Inside Hover (nested hovers)
hovering "settings option" which list the settings and while hovering those options I need another list
This is now available for you in today’s release of XD 34. Enjoy!
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.
Nathan Wells commented
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.
Spas Kakarchev commented
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
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 :)
kalika mathur commented
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.
Matthew Prina commented
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
Veerle Pieters commented
I need this for a simple thing: to show a dropdown menu items its hover states and have each of these dropdown menu items linked up to other artboards via tap trigger.
I assumed this was going to work and thought I was doing something wrong here. Now I see I didn't. This only seem to work when these menu (dropdown) items aren't nested into a tap or hover trigger of the 'main' menu item that opens this dropdown after a 'tap' trigger.
At least I can't get it to work (but according to the video below it should....)?
Wes Carr commented
When buttons are instances of a master and all say different things -- I want the hover effect to be the same for all of them.