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
- Go to the control settings of the element you wish to modify and enable the hover functionality for the intended control.
- Add the element to your page to see the control has a hover icon.
- Set the default style for the control and then specify a distinct style for the hover effect.
- 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:
- Use the code hint feature in Element Studio to get the correct CSS selectors and properties for the control.
- In the CSS editor, set the normal background color to the chosen color.
- 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.
