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 asset 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 the Default and Hover states will create a fade between states, smoothing the transformation.
- Once you make 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 user hovers over hotspot, show selected folders, objects or groups
- Hide – when user hovers over hotspot, hide selected folders, objects or groups
- Show and Stay Visible – when user hovers over hotspot, show selected selected folders, objects or groups and keep them visible even when moving off hotspot
- Hide and Stay Hidden – when user hovers over hotspot, hide selected folders, objects or groups and keep them hidden even when moving off hotspot
- Choose the folder, object, or group you want to reveal or hide
- 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 Folder, Object or Group action on your tablet or mobile variant will ensure mobile users can still interact your content.
Was this helpful?