Forum Discussion

AngieMansfie306's avatar
AngieMansfie306
Community Member
5 months ago

Hover and Selected states

I am trying to have both a hover state and a selected state on the same object and nothing I do seems to work.  I want the hover state to function only when it is in the non-selected state.  I want the selected state to be able to be unselected when clicked.   

I've tried different variables, etc. and nothing seems to work.

  • Built-in states come with built-in functionality. For example, an object with a Selected state will automatically toggle between Normal and Selected when it is clicked, with no triggers required. Here's more info: https://community.articulate.com/discussions/articulate-storyline/primer-take-advantage-of-built-in-states 

    The Hover state also has built-in functionality. You can't turn that off. It will appear when the user mouses over the object, no matter what other state the object is in. 

    You could create a custom state to replace the Hover state. Trigger it to show when the user mouses over the object, with the condition that the object does not equal (≠) Selected. (Yes, use "≠ Selected" as the condition. Don't use "= Normal," because Normal is part of all the built-in states.)

    • AngieMansfie306's avatar
      AngieMansfie306
      Community Member

      Hi Judy-

      Thanks for your reply. I followed your directions to add a custom hover state. Here's what is happening:

      * Hovers on and off properly in normal state
      * Selected state appears when clicked

      However:

      * Selected state disappears when mouse moves out (does not stay selected)
      * Selected state toggles to Hover state when clicked again (instead of back to normal state) unless the mouse moves out

      I've attached the slide to this email.

      Thanks again for your help!

      Angie Mansfield
      Field Staff Learning & Development Specialist
      Joint Commission Resources
      Joint Commission International
      Chicago - Washington - Dubai - Kingdom of Saudi Arabia - Singapore
      https://www.jointcommissioninternational.org/
      amansfield@jcrinc.com
      Phone: 1-630-268-7429

      [jpg

  • Hi Judy-

    Thanks for your reply.  I followed your directions to add a custom hover state.  Here’s what is happening:

    • Hovers on and off properly in normal state
    • Selected state appears when clicked

    However:

    • Selected state disappears when mouse moves out (does not stay selected)
    • Selected state toggles to Hover state when clicked again (instead of back to normal state) unless the mouse moves out

    I’ve attached the slide. 

    Thanks again for your help!

  • Drat! I thought that would work. 

    I think the issue is that the trigger for the custom hover state includes "Restore previous state when the user hovers out." Unfortunately, the "previous state" (that is, the state the object was in when the user started hovering) is Normal. So it goes back to that. 

    Well, if you really want a different look on mouse-over, I suggest you use the built-in Hover state. Yes, it will still show even after the user has selected the object. However, that indicates that the object is still clickable. 

    Or just don't include any hover state. After all, it's not accessible; users can't "hover" on a phone or tablet.