How do I add a custom cursor to a specific element on Squarespace?

The CSS cursor property lets you set custom cursors on specific elements. You can use built-in cursor types like crosshair and grab, or load a custom image file for a fully branded cursor.

For custom image cursors, upload a small PNG or SVG (32x32 max recommended) to your Squarespace file manager and reference the URL. Always include a fallback cursor type after the URL.

/* Built-in cursor types */
.gallery-item:hover {
  cursor: zoom-in;
}
.sqs-block-image:hover {
  cursor: grab;
}
/* Custom image cursor */
[data-section-id="YOUR_SECTION_ID"] {
  cursor: url('YOUR_CURSOR_IMAGE_URL'), auto;
}
/* Pointer on interactive elements */
.sqs-block-button-element {
  cursor: pointer;
}