How to add hover and click effects (interaction states)

In TeleportHQ, you add a hover or click effect with States: select the element, open States in the right panel, click +, pick a state such as hover, then change the styles you want. Those styles show when a visitor hovers, presses or focuses the element on your live site, and fade in over 0.3 seconds. Hover and focus styles set on an element apply at every screen size, on desktop and on mobile.

Before you start#

• Interaction states are available on every plan.
• You need a role that can edit the page: Owner, Admin, Designer or Editor. Editors can't change elements inside components.
• Style the element's normal look first. The state only changes the properties you set while the state is active.

Which state to pick#

The + menu in States shows the state names as they appear in CSS, in this order:

States you already added don't appear in the menu again.

Steps#

1. Add the state#

1. On the canvas, click the element once. For example, your Order a cake button.
2. In the right panel, open the Visual tab.

3. In the States section, near the top after Classes, click +.

   

4. In the menu, click hover. A hover chip appears in States and is highlighted, which means you're now editing the hover look.

2. Style the state#

1. Look near the bottom of the canvas. A State: bar with a hover button shows that your edits go to the hover state.

   

2. In the right panel, change a style as usual. For example, in Background, set the color to #1E3A8A.
3. Change any other style you want for hover. For example, in Text Style, set Text Color to #FFFFFF.

While the state is active, section titles with hover values turn purple. The element's normal values show as grey text.

3. Stop editing the state#

1. Near the bottom of the canvas, click the hover button on the State: bar. It reads Cancel while you point at it.
2. Your edits go back to the element's normal look.

You can also click the highlighted hover chip in States again, or select a different element.

Change how fast the effect fades in#

When you add an element's first state, TeleportHQ gives the element a 0.3-second transition (the fade between the normal and hover look), unless it already has a transition of its own. It shows in the Transition section of the Visual tab as all 0.3s ease.

1. Stop editing the state, so you change the element's normal look.
2. In Transition, click the row, or its Edit transition button (the pencil). The Edit Transition panel opens.
3. In Duration, type a new time, for example 600 (milliseconds) for a slower fade.

See How to add a transition to an element.

Check that it worked#

The canvas doesn't react when you hover over elements, so test the effect in Preview:

1. In the bottom toolbar, click Preview. Your site opens in a new tab.
2. Point at the button. It changes to the hover look with a short fade.

The effect also works on your published site. See How to preview your site before publishing.

Change or delete a state#

• To change a state, select the element and click its chip in States, for example hover. Then edit the styles.
• To delete a state, point at its chip and click the delete button that appears. Or right-click the chip and choose Delete. All the styles of that state are removed.

Troubleshooting#

My hover effect doesn't show when I hover in the editor The canvas shows a state only while you're editing it. Real hover happens in Preview and on the published site.

The change is instant and doesn't fade The element has no transition, or a transition of 0 seconds. Check the Transition section of the Visual tab, and add one with + (tooltip Add transition) if it's empty. Transitions only play in Preview and on the published site. See How to add a transition to an element.

I changed the hover style on the Mobile screen size, and now it's changed everywhere Interaction states and screen sizes don't combine in TeleportHQ. While a state is active, every edit goes to that state, whichever screen size is selected, and the state styles apply at every screen size. Switching screen size doesn't leave the state. Click the button on the State: bar before you edit the mobile look.

I edited the normal look, but it went to hover A state was still active. Check for the State: bar near the bottom of the canvas and click its button.

My visited link style only changed the color Browsers only let a visited style change colors, such as the text, background and border colors. The State: bar says so: "Browsers only apply colour changes to visited links".

The States + button is greyed out Every state that fits this element has already been added.

There's no States section States aren't available while you edit text inside an element, or for developer components. Click outside the text, then select the element again.

Good to know#

• Hover and focus styles apply at every screen size. You can't set a hover effect for mobile only, or a different hover on tablet, with the visual tools. Phones and tablets have no mouse, so visitors there usually see the hover look when they tap the element. If you need a screen-size-specific hover, you can write your own CSS with a media query in your site's custom code. See How to add code to every page (head and body).
• Class states work the same way. A CSS class can have its own states, set in the class editor. They apply to every element that uses the class. Classes don't offer link and visited. See How to edit a CSS class.
• The element's own state styles win over a class's styles.
• If you delete an element's last state, the automatic 0.3-second transition is removed too, but only if you didn't change it.
• With several elements selected, States shows every state that exists on any of them.
• The Advanced tab also has a States section. Click a state chip there to type CSS for that state directly.