Hover Interactions

Hover interactions allow you to hide and show folders, objects, or groups when the user hovers their mouse over your specified trigger. There are two ways to set up hover interactions in Ceros.

Using Object States:

• Select the object you want the user to hover over
• In the Design tab on the right, click the Plus (+) sign next to “States”
• You’ll see that the current state of the object will be labeled as “Default”
• In the drop-down menu, add a “Hover” state and transform the object to what you’d like it to look like on hover. You can change things like color, size, and rotation of the hover state.
• Adding a transition to your default and hover states will create a smooth transformation between states.

• Once you've made the edits to your hover state, take a look at your preview to see the hover state you’ve created.

Using Hotspots and Interactions:

• Draw a hotspot over the area you want the user to hover
• Select the hotspot and navigate to the Interaction tab in the Inspector Panel
• Select hover as your trigger
• Specify the action, which can be:
  • Show – when the user hovers over the hotspot, show selected folders, objects, or groups
  • Hide – when the user hovers over the hotspot, hide selected folders, objects, or groups
  • Show and Stay Visible – when the user hovers over the hotspot, show selected folders, objects, or groups and keep them visible even when moving off the hotspot
  • Hide and Stay Hidden – when the user hovers over the hotspot, hide selected folders, objects, or groups and keep them hidden even when moving off the hotspot
  • Change Target State - when the user hovers over the hotspot, a targeted object will change to a specified object state
• Choose the folder, object, or group you want to reveal, hide, or change the object state of
• Specify whether the area between the hotspot and target should also act as the trigger

Important Note: Mobile devices cannot show Hover interactions. Changing the interaction to On Click >  Toggle/Show/Hide > (Targeted folder, object, or group) on your tablet or mobile variant will ensure mobile/tablet users can still interact with your content.