(Squarespace) Change cursor to black circle, and make it white circle/black border on hover link

Description

  • Change cursor to black circle
  • Hover a link: change cursor to white circle + black border

#1. First, use this code to Code Injection > Footer
If code doesn’t work, you can comment below, message or send me an email.

<div id="custom-cursor"></div>
<script>
function initCursor() {
  let cursor = document.getElementById('custom-cursor');
  let links = document.getElementsByTagName('a');
  
  document.addEventListener('mousemove', function(e) {
    cursor.style.left = e.clientX + 'px';
    cursor.style.top = e.clientY + 'px';
  });
  for(let link of links) {
    link.addEventListener('mouseenter', function() {
      cursor.classList.add('link-hover');
    });
    
    link.addEventListener('mouseleave', function() {
      cursor.classList.remove('link-hover');
    });
  }
}
initCursor();
</script>

#2. Use this code to Custom CSS

* {
  cursor: none !important;
}
#custom-cursor {
  width: 8px;
  height: 8px;
  background: #000;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transition: background 0.3s;
}
a:hover ~ #custom-cursor {
  background: #fff;
  border: 1px solid #000;
  width: 10px;
  height: 10px;
}
#custom-cursor.link-hover {
  background: #fff;
  border: 1px solid #000;
  width: 10px;
  height: 10px;
}

#3. To change size/color of circle cursor. You can adjust these lines.

To make it change to white circle/black border when users hover Burger. You can use this extra code to Custom CSS.

a:hover ~ #custom-cursor,
.burger-inner:hover ~ #custom-cursor {
  background: #fff;
  border: 1px solid #000;
  width: 10px;
  height: 10px;
}

and replace

<script></script>

code in above step to this new script code.

1 Like