You can set up a hover effect when the cursor is hovered over a box or a style change when the focus is on a form entry field.

Hover (:hover)

A hover is an effect that is applied to an element when the user moves the cursor over it.

It's often used to make buttons and links look clickable.

Setting the style when hovering :

  1. Select a box or element.

  2. On the Condition Tool, check the "Hover" option on the far right.

  3. Set the style when hovering. When you're done, uncheck the "Hover" option or click anywhere on the page to return it to normal.

  4. Launch a live preview to see what the hover effect looks like in real life.

Click on the gray "Live Preview" button in the upper right corner of the screen.

in-hover (:in-hover)

An in-hover is an effect that is applied to a child element that is inside a parent element that has been set the hover style. When the user moves the cursor over a parent element, you can change the style of the child elements inside.

Set the style for child elements when hovering

Setting the hover style for a child element in STUDIO

  1. set the hover style for the parent box or element

  2. select the child box or element inside the parent element.

  3. In the Condition Tool, check the "In Hover" option on the far right.

  4. Set the style when hovering. When you're done, uncheck the "in-hover" option or click anywhere on the page to return it to normal. Launch a live preview to see what the hover effect looks like in real life.

Click on the gray "Live Preview" button in the upper right corner of the screen.

Focus (:focus)

Focus is the effect that is applied to the input fields of the form when the user makes a selection. It is used to reveal to the user that the input field is selected.

Setting the style when in focus :

  1. Select the input fields of the form.

  2. On the Condition Tool, click on the "Focus" option in the pull-down menu of the "Hover" button on the far right.

  3. Set the focus style. Once the settings are complete, uncheck the "Focus" option and return to the normal state.

  4. Launch a live preview to see what the focus effect actually looks like.

Click on the gray "Live Preview" button in the upper right corner of the screen.

Active(:active)

Active is the effect applied to the form button at the moment the user clicks on it.

Setting the active style :

Only the form button can be set to be active.

  1. Select the form button.

  2. On the Condition Tool, click on the "Active" option in the pull-down menu of the "Hover" button on the far right.

  3. Set the style when active. Once the configuration is complete, uncheck the "Active" option and return to normal.

  4. Launch a live preview to see what the active effect actually looks like.

Click on the gray "Live Preview" button in the upper right corner of the screen.

appear (&appear)

Appears is an effect in which an element appears on the screen when the user scrolls.

You can animate an element by setting the state just before it appears in the "&appear" condition and by leaving the condition blank and setting the transition to normal.

Setting the style for an element when appearing

Setting the appear style for an element in STUDIO :

  1. Select a box or element.

  2. In the Condition Tool, check the "&appear" option on the far right.

  3. Set the style just before it appears. When you are done, uncheck the "&appear" option, or click anywhere on the page to return to normal.

  4. Launch Live Preview to see how the appear effect looks like in real life.

Click on the gray "Live Preview" button in the upper right corner of the screen.

first-child(:first-child)

The first-child can only be set for the top of elements in a list.

Setting the first child style.

setting the first-child style for an element in STUDIO :

  1. select the first box or element in the list.

  2. In the Condition Tool, check the "First Child" option on the far right.

  3. Set the style. When you are done , uncheck the "First Child" option, or click anywhere on the page to return to normal.

  4. Launch Live Preview to see how the appear effect looks like in real life.

Click on the gray "Live Preview" button in the upper right corner of the screen.

in first child (in:first-child)

The in first-child can only be set for the top of elements in a list.

An in-first-child is an effect that is applied to a child element that is inside a parent element that has been set the first child style.

setting the in first-child style for an element in STUDIO :

  1. Set the first child's style to the parent box or element.

  2. Select the child box or element.

  3. Check the "In First Child" option on the Condition Tool.

  4. Set the style for in-first-child. When you are done setting, uncheck the "In First Child" option, or click anywhere on the page to return to normal.

Click on the gray "Live Preview" button in the upper right corner of the screen.

Did this answer your question?