Assembler CSS provides a wide variety of states you can use in combination with a property.
Using a particular state is done by appending to the property name the . symbol,
followed by the name of the state you want to target.
Hover your mouse here
<div x-style="color:royalblue; color.hover:tomato; ...">
Hover your mouse here
</div>
The following states are available:
- hover
- focus
- focus-within
- focus-visible
- active
- default
- checked
- indeterminate
- disabled
- enabled
- valid
- invalid
- required
- optional
- out-of-range
- in-range
- read-only
- read-write
- empty
- placeholder-shown
- link
- visited
