Hover Effects (adding Pseudo-classes)
- Drew Weldon (Unlicensed)
When editing elements in the builder, you will notice a dropdown in the upper right corner of the style manager with a title of “State.” If you click on this dropdown you can select from a few different states which will change the appearance or behavior of an element while in that state.
While editing be very mindful of what “State” you are editing in at all times. One can very easily switch to a different state to edit, and then continue editing the rest of their page all in the same state unintentionally. (See HERE for example)
Below are some examples of what each of these states can do:
States
In the default State selection, all elements will be given styling in their neutral state on the page without user interaction.
Hover effects what the element will do when a user hovers over it (Only applies for desktop)
For example, Hover can be used to change a button's color when the user's pointer hovers over it.
Click, effects what the element does when it is clicked by a user.
Even/Odd changes the color of the text based on whether the text is on an even or an odd line. See associated article for more reference: W3 Schools :nth-of-type() Article.
Example of Poor Design Practices:
Note in this example, how the user changes to hover state then edits multiple things on the page. Later they remember and change the state back, but now all the edits they made only apply while a user hovers on the element (the large font and color changes).