Hover vs. Click State Changes

Hi Folks at Tumult,

I was wondering if you could help me out with an issue I was having. I have some hover states set up so that when I hover over a certain header link, the background will change color. If I stop hovering over this link, the background will return to its original previous color.

However, I am having issue when clicking the link. When I click the link, I want the background to remain the color it was in the hover state. However, the hover out functionality will then activate after the click, and the background color gets messed up.

The base color is magenta. When you hover over the I’About’ link the background turns green. When you hover off it returns to magenta. However, When I click ‘About’, I want the background color to remain green and now the new base color is green.

Any help greatly appreciated!

You’ll want to separate the animations of changing the background color and the hover-over effect for the navigation item.
So you’ll wind up with timelines for just the background changes. Then your action on the navigation items would chain together starting timelines for both timelines for mouse over, and on mouse out you would only start the element one in reverse, but not the background timeline.

The next step is in the Scene Inspector, you’ll want to change the background timelines to use relative keyframes. This means that it will change from the color it is at to the new color.

The final (and optional?) step is that you can add a on mouse out action on the main containing group to run a timeline to turn the color back to the default state, if you didn’t want it to stay that way. (I assume this would be the one for Home, but otherwise you could create a new timeline with relative keyframes again).

Hi Jonathan,

I know this is an old post but I was wondering if you would be able to elaborate further or possibly provide an example file. I believe I’m having the same issue as the person above.

Thank you in advance.

Hmm, re-reading the question and my answer, I think I might have gotten it wrong in that my answer provides a way to have the background change back to a specific state, but not one that was actually clicked on. I think I was assuming there would be multiple scenes.

Maybe you could attach your .hype document with the problem you are having?

I’d say the best approach for this would be to use multiple scenes, each would have its own background color. Alternatively this could be easily handled with JavaScript, that keeps track of which state was last clicked.