Forum Discussion
Custom Hover State not Working as Expected
I'm fairly new to Storyline.
I have a button the uses the built-in states: Normal = blue, Hover = orange, Visited = red. I want a check mark to appear on my button when it is clicked (Visited = red + check) and also update the hover state (orange + check). So, I created a custom state called "Visited Hover" that is orange + check.
However, it is not working as expected. When I hover over the button, it turns orange but it stays orange after I move the mouse off instead of resetting to normal (blue). When I click it, it turns red (Visited state) but then turns orange again when I move the mouse off. It seems stuck on the Hover state and never goes to my custom "Hover Visited" state.
There are no other triggers on this slide. I even created a dummy project to test just this and get the same result. What am I missing?
6 Replies
Hi GotG,
Feel free to share your file here or privately in a support case if you still need assistance!
Have you tested what it does if you completely remove the trigger above?
Thanks Ron. Removing the trigger actually kind of works and it seems like Storyline is honoring the "Visited Hover" state. However, after a bit of investigating, I see that the "Visited Hover" is not getting applied. The standard "Hover" state is being applied over the "Visited" state which has the check mark, so it appears that "Visited Hover" also has the check mark.
If I move the check mark on "Visited Hover" from the left to the right side of the button, I can see that the check mark stays on the left when I hover, proving that "Visited Hover" is not being applied.
Adding the trigger back behaves as I describe previously. I've attached my bare bones story file.
Hi GotG!
Glad to see Ron has been helping you. Happy to jump in!
The design you were looking to implement can be accomplished in a simpler way, without the use of additional custom States, or Triggers. In the .story file I've attached, I added a Button with a Checkmark only on the Visited State (Red). This icon appears once the Button has been clicked (visited), and remains when the learner hovers over the Button as well.
The issue you were facing was due to having two hover events occur simultaneously. The built-in hover event did not disable, which is why it was conflicting with the second (custom) hover event.
Please let me know if this works for you!
