☰

Cursor & Interaction Properties

🧰 Cursor & Interaction

Cursor Pointer-events User-select

Assignment

Assignment 1 Assignment 2
📝 cursor – Mouse Pointer Appearance
Definition: Controls the appearance of the mouse cursor when hovering over an element. Different cursor styles communicate user affordances - indicating whether an element is clickable, resizable, or disabled. Improves UX by providing visual feedback about what will happen on interaction. Can use standard keywords, URLs to custom images, or combinations of both.
Default Value: auto
Values: auto | pointer | default | text | move | wait | not-allowed | grab | grabbing | zoom-in | zoom-out | col-resize | row-resize | and more

✦ cursor: pointer (Hand/Link)

Indicates element is clickable
.clickable {
  cursor: pointer;
}

✦ cursor: default

Default arrow cursor
Hover Me - default cursor
.default-cursor {
  cursor: default;
}

✦ cursor: text

Text selection cursor (I-beam)
Hover Me - text cursor (I-beam)
.text-cursor {
  cursor: text;
}

✦ cursor: move

Indicates element can be moved/dragged
Hover Me - move cursor
.movable {
  cursor: move;
}

✦ cursor: not-allowed

Indicates action is disabled/not permitted
Disabled - not-allowed cursor
.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

✦ cursor: grab & grabbing

Grab cursor for draggable elements
Hover/Drag Me - grab cursor
.draggable {
  cursor: grab;
}

.draggable:active {
  cursor: grabbing;
}

✦ cursor: zoom-in & zoom-out

Zoom cursors for magnification
Zoom In
Zoom Out
.zoom-in {
  cursor: zoom-in;
}

.zoom-out {
  cursor: zoom-out;
}

✦ cursor: wait

Indicates system is busy loading
Loading - wait cursor
.loading {
  cursor: wait;
}

✦ cursor: Resize Cursors

Different resize cursors for different directions
col-resize
row-resize
nwse-resize
nesw-resize
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
.nwse-resize { cursor: nwse-resize; }
.nesw-resize { cursor: nesw-resize; }
📝 pointer-events – Mouse/Touch Interaction Control
Definition: Determines whether an element responds to mouse or touch events. When set to none, the element becomes "invisible" to the pointer - clicks pass through to elements below, and hover effects don't trigger. Useful for creating clickthrough overlays, disabling interactions temporarily, or performance optimization. Works on all pointer-based input (mouse, touch, pen).
Default Value: auto
Values: auto | none | inherit

✦ pointer-events: auto (Default)

Element responds to all pointer events normally
.interactive {
  pointer-events: auto;
  /* Element is fully interactive */
}

✦ pointer-events: none (Click-Through)

Element doesn't respond to pointer events - clicks pass through
.non-interactive {
  poi📝 user-select – Text Selection Control
Definition: Controls whether users can select text content in an element. Allows developers to prevent text selection (useful for buttons, headers), force selection (rare), or allow select-all behavior. Affects UX significantly - disabling selection can frustrate users, so use sparingly and only when justified. Important for accessibility considerations.
Default Value: auto
Values: auto | text | none | all | contain (and browser-specific: -webkit-user-select, -moz-user-select)

✦ user-select: auto (Default)

Users can select text normally
Select me! - user-select: auto (default behavior)
.selectable {
  user-select: auto;
  /* Text can be selected */
}

✦ user-select: text

Text is always selectable
Select me! - user-select: text (always selectable)
.always-selectable {
  user-select: text;
}

✦ user-select: none

Text cannot be selected by user
You cannot select this text - user-select: none
.no-select {
  user-select: none;
  /* Text cannot be selected */
}

✦ user-select: all

Triple-click selects entire content
Triple-click - user-select: all (selects entire text)
.select-all {
  user-select: all;
  /* Triple-click selects all */
}

✦ Button with No Text Selection

Buttons typically disable selection for cleaner UX
button {
  user-select: none;
  /* Prevent text selection on buttons */
}

✦ Code Block (Select Enabled)

Code blocks should allow selection for copying
console.log('Select me to copy!');

const result = 42;

return result;
code {
  user-select: text;
  /* Allow copying code */
}

✦ Use Cases & Best Practices

  pointer-events: auto;
  position: relative;
  z-index: 1;
}

✦ Temporarily Disabling Interaction

Disable form during submission
form.submitting * {
  pointer-events: none;
}

form.submitting {
  opacity: 0.6;
}
user-select – Disable text selection
Controls whether the user can select text or not.
You cannot select this text.
<div style="user-select:none;"> You cannot select this text. </div>