Tutorial: Getting the Hover State to Behave Itself

Have you ever found that the hover state in Storyline doesn't work the way that you want it to?

Maybe you're keen on having the selected or visited states always appear in front of the hover state, only to be disappointed when the hover state overrides them?

Or perhaps you are frustrated because when you click a button you expect the selected state to appear, but for some reason, nothing happens until you move the mouse away?

In this tutorial, we are going to look at this problem in detail and figure out what leads to these inconsistent results. Then, we'll learn how to stop the hover state from overriding other states when that isn't wanted.

Click here to see the tutorial.

Let me know if you have any questions, comments or are stuck with implementing any of this. I'm happy to help where I can.

7 Replies

Nicole Legault
Staff

2 years ago04/25/17 at 2:28 pm (UTC)

Nice work, Matthew!

Nancy Woinoski
Hero

2 years ago04/25/17 at 3:17 pm (UTC)

Nice write-up Mathew. This is what I do as well. I think it works because cutting and pasting the selected state puts the selected state on top so it covers the hover state.

This method works best if the selected state is the same size or larger than the hover state. If the hover state is larger than the selected state - say for example - the hover displays a tool tip above the button - the tool tip will still appear when you click the selected button.

Matthew Bibby
Author

2 years ago04/26/17 at 1:47 am (UTC)

Thanks Nicole and Nancy.

You're right about this method working best if the states are the same size. I've gotten around this before by adding an additional object to the back of the selected state that is the same size as the hover state but matches the background. It's not 100% ideal as it is visible if the user tabs to that object (thanks to the bright yellow outline), but certainly better than having the hover state peeking though.

Carri Zurawik

over 1 year ago11/30/17 at 6:08 pm (UTC)

I am having this issue and tried your fix, but it isn't working (great demo by the way!). My hover state is a pop up above an image that gives more information. My selected state is also a pop up above an image that says, wrong ingredient try again. I built it this way as we don't want to wait for the user to submit the interaction in order to get the incorrect feedback. I've copied and pasted and hover is still overriding on a selected state.