Hover & click actions

This course explores the different actions your elements can perform. You can set up hover actions to show, hide, or toggle other elements. Or you can make the elements perform actions when clicked, which opens up a whole new array of interactions.

Hover actions

When a viewer hovers a specific element, you can make certain group(s) or element(s) show, hide, or toggle:

• Toggle
  Makes the element appear or disappear when actively hovering an element, and stops the action when you stop hovering.
• Show
  Makes the element appear on-hover and remain visible when you stop hovering.
• Hide
  Makes the element permanently disappear on-hover.

With an element or group selected, head on over to the ‘actions’ tab in the ‘element’ panel and select the ‘on hover’ option. From here, you can select the group(s) or element(s) to toggle, show, or hide to configure the interaction.

If you wish to show specific elements only when another element is hovered or clicked, don’t forget to hide them by default via the Layers panel.

Click actions

Click actions can do much more than just showing or hiding other elements. For example, it can navigate to a certain scene, page, or even a specific element. You can also navigate to other websites, send emails, download files, or control other elements, such as videos and slideshows, on your page.

Sticky pop-ups

In this chapter’s video we’re also building a sticky pop-up that stays in place when scrolling further down the page, but also darkens the background a little bit. Be sure to watch the video if you want to learn how to do this too.