Easy custom cursor for specific elements or sections in Squarespace

How to use a custom cursor in Squarespace?

This tutorial walks through how to add a custom cursor in Squarespace 7.1 using a simple image file and the CSS cursor property — and how to apply it selectively to specific elements or sections. We begin by targeting a elements globally and setting a custom image with a fallback of auto. The tutorial also explains how to adjust cursor hotspot coordinates for proper alignment and when (and when not) to use !important to override existing styles. Next, we explore how to target non-anchor clickable elements such as button elements and Summary Block navigation arrows. Using the browser inspector, we identify the appropriate selectors and discuss the difference between clean selector reuse and forceful overrides. Finally, we demonstrate how to limit the cursor effect to a specific section — such as #footer-sections — and how to apply the custom cursor to either specific elements within that section or the entire container itself. The result is a lightweight, flexible customization that gives you full control over where your custom cursor appears.

If you like the idea of applying a custom cursor to your client’s site but you also want to have control over where it displays, this tutorial is for you.

Using just an image file and a few lines of CSS, we’ll look into how to target links, buttons, navigation items, and individual sections like the footer area.

This method is perfect if you want to add something more than (or instead of) a hover mode, but only have a few minutes to spare.

So, without further ado, let’s get into it.

Video timestamps

00:00 - Intro & customization overview

Let’s first take a look at the final result we’ll be achieving today and see what’s needed to make it happen on our client project.

00:44 - Preparing the cursor + targeting basic link elements

With our chosen 32x32 px custom file in place (this is my bullseye image in case you want to use it), the next step is to simply pick where we want the cursor to show up. In the first example, we’ll target all <a> elements.

02:27 - Fixing cursor alignment

Next, we’ll see how we can adjust the position of the image so that whichever part of it we want to set as the center, sits there. In my case, I’ll use 18 and 18 as the coordinates, just because math wasn’t mathing at this point.

03:15 - Targeting stubborn clickable elements

Then, we’ll take a look at why some clickable elements aren’t displaying the cursor and what to do about them. We’ll see how even links of seemingly the same kind are built differently, and how to target them correctly to apply the same customization.

09:52 - Targeting specific sections and their clickable content

Last but not least, we’ll see what’s needed to target entire sections AND stubborn elements inside them that may already be displaying a cursor of their own.

TL;DR

• We’ll see three different ways to apply a custom cursor to clickable elements on a Squarespace site.

• To do this, we’ll need to upload a 32px by 32px image to our Custom Files area. That’s the recommended size. It’s “center” can be adjusted via CSS.

• In the first example we’ll target all <a> elements on the site. However, we’ll see that some clickable things aren’t the same kind of element, so they need to be targeted differently (e.g. folder nav titles and Summary Carousel arrows).

• Lastly, we’ll apply the custom cursor to the entire footer area, and see how to adjust our code to make it work for link elements only within the footer.

And just like that, now you have full control over where your client’s custom cursor shows up!

You can have fun with this and implement different cursor images for different sections, or – if you’re rather looking to simplify the process – take advantage of the automatic plugin that targets all kinds of clickable elements for you, to speed up your workflow.

Hope you liked this one!

Until next time,

B.

Full code

Custom CSS Window

/*EASY CUSTOM CURSOR FOR SPECIFIC ELEMENTS OR SECTIONS IN SQUARESPACE*/
//Example 1
a {
  cursor: url("CURSOR.png") 18 18, auto;
}

//Example 2
a,
button,
.summary-carousel-pager-next {
  cursor: url("CURSOR.png") 18 18, auto !important;
}

//Example 3
#footer-sections,
#footer-sections a {
  cursor: url("CURSOR.png") 18 18, auto;
}