Enabling Hover Styles

Introduction to Hover Effects in Element Studio

This tutorial guides you through adding hover effects to controls in Element Studio, enhancing the interactivity and visual appeal of your web elements.

Creating a New Element with Hover Effects

Enabling Hover on the Control

  1. Go to the control settings of the element you wish to modify and enable the hover functionality for the intended control.
  2. Add the element to your page to see the control has a hover icon.
  3. Set the default style for the control and then specify a distinct style for the hover effect.
  4. Preview the changes on the front end.

Implementing CSS for Hover Effects

Writing Hover-Specific CSS

To ensure the hover effects are applied correctly, write specific CSS rules:

  1. Use the code hint feature in Element Studio to get the correct CSS selectors and properties for the control.
  2. In the CSS editor, set the normal background color to the chosen color.
  3. Specify a different background color for the hover state using the CSS pseudo-class :hover.

Additional Notes

The hover CSS will pull the value from the control’s hover setting. Ensure the control slug is correctly referenced in your CSS, and the hover-specific properties are noted with ‘_hover’ to distinguish them from regular state properties.