Forum Discussion
Button States & Triggers
Hopefully, I can explain this well.
I have button 1. Button 1 has 3 states: normal, hover and visited. See below.
When learner clicks on button 1, it opens a layer. When learner closes the layer, button 1 will change to the visited state.
However, when the learner hovers over button 1 while it is in the visited state, button 1 reverts to the hover state while still showing the visited state. See below.
How can I get button 1 to show the hover state when the learner hovers over button 1 while it is in the visited state AND how do I get button 1 to revert BACK to the visited state when the learn moves the cursor?
The following trigger only gets me hover state:
If I check off the last option, it reverts it back to normal.
Any one can help?
Hover and Visited are built-in States, which come with built-in functionality. (See: PRIMER: Take advantage of built-in states | Articulate - Community) Adding triggers that duplicate what will happen automatically can cause problems.
Because the Hover state can interfere with what's in other states, I design it in a way that will work no matter what other state the object is in. (For example, adding a glow.) Or just delete that state. After all, it's not accessible and will never be seen on touch-screen devices.
Yes, the first photo in my post are the built in functionalities. The triggers I am trying to add are for AFTER the built in function has occurred. For instance, if the button is in the visited state and the learner hovers over the button while in the visited state, I would like for it to show the hover state then visited if the learner moves the cursor.
Also, majority of our courses will be taken on a desktop so these functionalities will be seen. It's not a requirement for me to do this but more just me wanting to learn if it's even possible to fix.
No matter what state an object is in (Normal, Selected, Visited, or custom), the Hover state will show when the user mouses over the object. When the mouse is no longer over the object, the object will revert back to the state it was in. That happens without any triggers.
However, the appearance depends on what's in the state.
For example, an object will show basic formatting (e.g., different colors for the fill of a shape) based on the current state.
- The Visited or Selected color might not show right away when the object is clicked. That's because the Hover state will still show as long as the user keeps the mouse over the object. (Depending on the design, that could be confusing.)
When extra items (e.g., icons, shapes) are inserted directly into the states of another object, how they appear depends on the state. (This is where things can seem a bit wonky.)
- Items in the Normal state will appear in the other states, because states are built on Normal.
- Items in the Selected state will appear over Normal items but under Hover and Visited items.
- Items in the Hover state will appear over Normal and Selected items but under Visited items.
- Items in the Visited state will appear over items in other states.
- Visibility will be impacted based on areas that are solid vs. transparent.
- The visibility hierarchy is now demonstrated on the "Combining States" slide in my review of built-in states: https://360.articulate.com/review/content/eaccc037-929b-43b5-b636-5333181a9c70/review
Those factors need to be considered when deciding what should go into each state.
Based on your screenshot, it looks like the states aren't all the same size. And something else might be off, but it's hard to tell what's going just by looking at images.
