How to add text to cursor on hover

August 15, 2022

I have managed to put together a custom cursor that changes when hovering on different data-type. For this example, when you hover on the first image the cursor changes to a pause icon, when you hover on the second image the cursor changes to a play icon, I would like to change the play icon to just the text "play" instead of the icon.

const cursor = document.getElementById("cursor");

const animateCursor = (e, interacting) => {
  const x = e.clientX - cursor.offsetWidth / 2,
        y = e.clientY - cursor.offsetHeight / 2;
  
  const keyframes = {
    transform: `translate(${x}px, ${y}px) scale(${interacting ? 8 : 1})`
  }
  
  cursor.animate(keyframes, { 
    duration: 800, 
    fill: "forwards" 
  });
}

const getCursorClass = type => {
  switch(type) {
    case "video":
      return "fa-solid fa-play";
      case "image":
      return "fa-solid fa-pause";
    default:
      return "fa-solid fa-arrow-up-right"; 
  }
}

window.onmousemove = e => {
  const interactable = e.target.closest(".interactable"),
        interacting = interactable !== null;
  
  const icon = document.getElementById("cursor-icon");
  
  animateCursor(e, interacting);
  
  cursor.dataset.type = interacting ? interactable.dataset.type : "";
  
  if(interacting) {
    icon.className = getCursorClass(interactable.dataset.type);
  }
}

body {
  background-color: rgb(20, 20, 20);
  height: 100vh;    
  margin: 0px;  
  
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 4vw, 100px);
}

body:hover > #cursor {
  opacity: 1;
}

#cursor {
  height: 20px;
  width: 20px;
  background-color: white;
  border-radius: 20px;
  
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 10000;
  
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
  
  display: grid;
  place-items: center;
}

#cursor:not([data-type=""]) > #cursor-icon {
  opacity: 1;
}

#cursor-icon {
  font-size: 6px;
  line-height: 0px;
  
  opacity: 0;
  transition: opacity 400ms ease;
}

.interactable {
  aspect-ratio: 1 / 1.5;
  width: clamp(120px, 40vmin, 600px);
  background-position: center 50%;
  background-size: 100%;  
  opacity: 0.4;

  
  transition: background-size 400ms ease, opacity 400ms ease;
}

.interactable:hover {
  background-size: 105%;
  opacity: 0.8;
}

<script src="https://kit.fontawesome.com/944eb371a4.js"></script>
<div id="cursor">
  <i id="cursor-icon" class="fa-solid fa-arrow-up-right"></i>
</div>

<div 
  class="interactable" 
  data-type="image"
  style="background-image: url(https://images.unsplash.com/photo-1657739774592-14c8f97eaece?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60)">
</div>

<div 
  class="interactable" 
  data-type="video"
  style="background-image: url(https://images.unsplash.com/photo-1657779582398-a13b5896ff19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzNXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60)">     
</div>

>Solution :

Add a new class named play in the css file

.play::after {
  content: "Play";
  font-style: normal;
}

Then add the new class name in the following portion of the JS file.

const getCursorClass = type => {
  switch(type) {
    case "video":
      return "play"; // <--- add the class name here
      case "image":
      return "fa-solid fa-pause";
    default:
      return "fa-solid fa-arrow-up-right"; 
  }
}

Codepen URL