Skip to main content
S
Stella Mark
Participant
November 10, 2022
Answered

component does not show a state when hover is chosen as a trigger

  • November 10, 2022
  • 1 reply
  • 364 views

Hi everybody,

I am currenlty learning using XD, so be patient please if my query is silly or my vocabulary not very professional. I am working on my first project for a course I am doing. 

I am having problems with prototyping components.

I have created a component with different states (it's a collapsed/open menu). My aim was to highlight the menu entris when hovering over them (on the open state). So I have added for each entry a semibold entry, with appeareance set at 0% and a regular entry with appearance set at 100% on the Default state. I have created a "menu open" state, and a "selected entry" state, in which the appearance of the entry was set to show the bold one only.

When prototyping I added the trigger "hover" on the entry "dog" with destination "state selected"

I have tried to prototype directly the main component and the instance in the artboard but the result is the same; the "bold" state when hovering on the menu entry is not displayed. 

I have tried everything I could think of, but more changes I make more confused everything appears. I have read a few articles online but I am still not sure what I am doing wrong. Can somebody help with this? your feedback is much appreciated! 

I cannot share the link apparently, but if needed I can invite to edit. Also I hope the screenshots below make things more clear.

Thank you!!

 

    This topic has been closed for replies.
    Correct answer Spas K.

    Hey there! You need to handle the menu items as nested components. You will make 1 component for a menu item, add a hover state inside it, and then use that component for the entries. This way the parent menu component will only be used for the collapse part, and the item components will be used for the hover interaction.

     

    An annoying detail - for each of the component instances, you will have to manually change the text for the default and hover states. The Xd team never fixed that.

     

    A very important note: When adding triggers/links to nested components that point to other pages or states of the parent component, you must first wrap the nested component in a group, and add the link to that group instead.

     

    I have made a simple example for you, so you can see how it's set up. One tip: when adding a hover trigger, always make it a transition without animation. Otherwise it's annoying because it waits for the animation to run before you can interact with the hover state.

     

    Here's the .xd file, and here's the prototype link.

    1 reply

    Spas K.
    Community Expert
    Spas K.Community ExpertCorrect answer
    Community Expert
    November 10, 2022

    Hey there! You need to handle the menu items as nested components. You will make 1 component for a menu item, add a hover state inside it, and then use that component for the entries. This way the parent menu component will only be used for the collapse part, and the item components will be used for the hover interaction.

     

    An annoying detail - for each of the component instances, you will have to manually change the text for the default and hover states. The Xd team never fixed that.

     

    A very important note: When adding triggers/links to nested components that point to other pages or states of the parent component, you must first wrap the nested component in a group, and add the link to that group instead.

     

    I have made a simple example for you, so you can see how it's set up. One tip: when adding a hover trigger, always make it a transition without animation. Otherwise it's annoying because it waits for the animation to run before you can interact with the hover state.

     

    Here's the .xd file, and here's the prototype link.

    S
    Stella MarkAuthor
    Participant
    November 11, 2022

    And it worked like a charm! 🙂

    Thank you so much for your help and the tips. I have spent days trying to figure it out. Loads of things to learn still. Thanks again!

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