Cursor
Activating this feature transforms the cursor into a circle with a central dot, which can be easily customized using CSS. A specific class, .xx-cursor
, acts as a trigger for further modifying the cursor's appearance. This customization is also handled via CSS. Here is an example:
HOVER ME
<div class="xx-cursor df jcc aic x-3 l-4 m-6 s-8 z-10 y-12 m0a">HOVER ME</div>
CSS TRIGGERS
.xx-cursor
: Used for triggering, in order to know which elements to apply the cursor effect when we hover them.
.custom-cursor
: Target this element to change the big circle that follows the mouse.
.custom-cursor::before
: This is the small dot that also follows the mouse.
.custom-cursor.is-hovering
: Target this class name to change the effect when mouse hovers over an element that has .xx-cursor
.