freecoding.school100% FREE · NO SIGNUP
Grid CanyonISSUE #9 of 27

cursor · pointer · grab · custom

FlexboVSThe Float Phantom
Flexbo sayscursor sets the mouse pointer shape — pointer for clickables, plus grab, text, not-allowed.

cursor signals interactivity. pointer marks clickable things; text, move, grab/grabbing, not-allowed, wait communicate state. You can supply a custom image. Real buttons/links get pointer automatically; add it to custom clickables.

Power-ups you unlock

The Float Phantom attacks — common mistakes

Boss battleGive a clickable div cursor:pointer, a disabled one not-allowed, a draggable one grab.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>div{padding:10px;color:#06040d;margin:4px 0;background:#b388ff}.click{cursor:pointer}.no{cursor:not-allowed;opacity:.6}.drag{cursor:grab}</style></head><body style="background:#06040d"><div class="click">pointer</div><div class="no">not-allowed</div><div class="drag">grab</div></body></html>
▶ Open the interactive comic issue
‹ Visibility · Hidden Vs Display NoneFlexbox · The One-Dimensional Layout ›