Skip to main content
Solved

Can I navigate to a new page using an interactive component state?

  • March 18, 2021
  • 4 replies
  • 10863 views

sekeidesign

I have an interactive component that has a base state and a hover state.
I would like to be able to click on the hover state in my prototype, in order to navigate to another arbitrary page.

Is this possible? I can change the state of the component (to hover) in my prototype and connect it to another page, but when I switch it back to base, and then try out my prototype, that doesn’t actually work.

Best answer by Shane

Create your component with internal states, eg:
default --while hovering–> hover --while pressed–> pressed
Then just put it on a frame/screen, and add an on click interaction that goes to your desired frame (there’s no need to apply the onclick to the hover state, just the default will work).

View original

4 replies

Shane
  • 74 replies
  • Answer
  • March 18, 2021

Create your component with internal states, eg:
default --while hovering–> hover --while pressed–> pressed
Then just put it on a frame/screen, and add an on click interaction that goes to your desired frame (there’s no need to apply the onclick to the hover state, just the default will work).


kdeebee
  • 3 replies
  • March 27, 2021

I tried this and for some reason, the on click event stops working once I have hover at a lower level in the component. I tried it with hover and mouse enter / leave. Screenshot 2021-03-27 at 18.49.34 This is how it looks on the Prototype tab. When I remove the hover or mouse enter interactions, the on click works. It’s like the underlying hover interaction prevents or takes precedence over the on click. Any idea what I might be doing wrong? Thanks.


Shane
  • 74 replies
  • March 27, 2021

Try using “while hovering” rather than the mouse enter interaction? I’m away from my computer at the moment and can’t test it, but that’s the setup I usually use. Other thing might be to change the instance of the component to the mouse enter state in the design, and apply the on click event there. Shouldn’t make a difference, but this is a beta so you never know 🙂


kdeebee
  • 3 replies
  • March 28, 2021

Thanks Shane. That’s helpful. I changed it back to ‘while hovering’ and I noticed that there was an additional “change to” event that was triggered by an “on click” by mistake. So I cleaned that up and it works now. Tx!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings