Cursor

Utility classes to change pointer behaviour

Class reference

Class

Output

.c-auto

pointer: auto;

.c-default

pointer: default;

.c-pointer

pointer: pointer;

.c-wait

pointer: wait;

.c-move

pointer: move;

.c-not-allowed

pointer: not-allowed;

.c-auto changes the cursor depending on the context of the content being hovered on. Example:- cursor becomes a select on hovering over text.

Hover on me

<div class="c-auto">...</div>

.c-defaults shows the default cursor irrespective of the semantic element it is hovering on.

Hover on me

<div class="c-default">...</div>

.c-pointer shows a pointing hand to indicate that an element is clickable.

Hover on me

<div class="c-pointer">...</div>

.c-wait shows a spinner to indicate that some background process is taking place.

Hover on me

<div class="c-wait">...</div>

.c-move indicates that the element is draggable.

Hover on me

<div class="c-move">...</div>

.c-not-allowed indicates that the element cannot be clicked. Sometimes used to prevent accidental clicks.

Hover on me

<div class="c-not-allowed">...</div>