Highlighted

Hover effect cancels other (tap)triggers

New Here ,
Sep 29, 2020

Copy link to clipboard

Copied

Hi! While UX designing a website, I bumped into a problem: I want some circles to have a hover-effect so the user knows it's a button. Then, when the user taps the circle, I want them to go to another artboard. For some reason, when I added the hover-effect, the tap-trigger won't work anymore. I tried deleting the hover-effect, this results in the tap-trigger working again. But after adding the hover-effect again, the tap-trigger stopped working... again...

 

Is there someone with experience with this kind of problem and with a solution?

 

Please let me know! Thanks!

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

You have to add the tap interaction to the hover state of the component, instead of a secondary interaction of the default state. When you go to the prototype tab, switch to the hover state of the circle and then make the connection.

 

Otherwise, when the hover animation is over, it essentially swaps the state with another, which doesn't have an interaction on it.

 

Hope that helps 🙂

TOPICS
Prototyping

Views

87

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Hover effect cancels other (tap)triggers

New Here ,
Sep 29, 2020

Copy link to clipboard

Copied

Hi! While UX designing a website, I bumped into a problem: I want some circles to have a hover-effect so the user knows it's a button. Then, when the user taps the circle, I want them to go to another artboard. For some reason, when I added the hover-effect, the tap-trigger won't work anymore. I tried deleting the hover-effect, this results in the tap-trigger working again. But after adding the hover-effect again, the tap-trigger stopped working... again...

 

Is there someone with experience with this kind of problem and with a solution?

 

Please let me know! Thanks!

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

You have to add the tap interaction to the hover state of the component, instead of a secondary interaction of the default state. When you go to the prototype tab, switch to the hover state of the circle and then make the connection.

 

Otherwise, when the hover animation is over, it essentially swaps the state with another, which doesn't have an interaction on it.

 

Hope that helps 🙂

TOPICS
Prototyping

Views

88

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 29, 2020 0
Adobe Community Professional ,
Sep 29, 2020

Copy link to clipboard

Copied

You have to add the tap interaction to the hover state of the component, instead of a secondary interaction of the default state. When you go to the prototype tab, switch to the hover state of the circle and then make the connection.

 

Otherwise, when the hover animation is over, it essentially swaps the state with another, which doesn't have an interaction on it.

 

Hope that helps 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 29, 2020 1
New Here ,
Sep 29, 2020

Copy link to clipboard

Copied

Thanks! Works like a charm now!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 29, 2020 0
New Here ,
Oct 16, 2020

Copy link to clipboard

Copied

Hi. One other question for this topic. I can't combine the hoverstate with a tab state? So for example. My issue is, that everytime i create a hover state and i want to tab/click it, it is only clickable after the hover animation ends? So what if i want to tab/click faster on the button? Often someone tries to click the button - but he can't because its in hover-state and he has to click another time.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2020 0