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.
8 Replies
Nice work, Matthew!
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.
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.
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.
Try copying and pasting the selected state Carri rather than the hover state. Maybe that'll help.
Thank you, Matthew it did!
Wonderful!
One more detail to add to this issue. A selected-hover state is needed because of a set of check boxes I am using in a multiple-answer quiz item. The checkbox item also includes the text but for some reason, once the item is selected, the text styling is lost during the selected-hover state and the text snaps to a zero distance from the checkbox instead of about 37px of padding-left. I ended up deleting the hover state.