如何在悬停时将自定义光标播放图标替换为文本‘play’

要实现把悬停video类型元素时的播放图标换成文本'play'，只需要做以下几处修改：

关键修改点 #

1. 将光标内的<i>标签替换为<span>，兼容纯文本和图标两种内容展示
2. 调整JS逻辑，不再仅通过修改类名切换图标，而是根据元素类型直接设置文本或图标类名
3. 微调CSS，确保文本'play'在光标中显示居中、清晰

修改后的完整代码 #

<script src="https://kit.fontawesome.com/944eb371a4.js"></script>
<div id="cursor">
  <span id="cursor-content" class="fa-solid fa-arrow-up-right"></span>
</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>

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-content {
  opacity: 1;
}

#cursor-content {
  font-size: 6px;
  line-height: 0px;
  font-family: sans-serif;
  font-weight: bold;
  
  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;
}

const cursor = document.getElementById("cursor");
const cursorContent = document.getElementById("cursor-content");

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 updateCursorContent = type => {
  // 清空原有内容和类名
  cursorContent.className = "";
  cursorContent.textContent = "";
  
  switch(type) {
    case "video":
      cursorContent.textContent = "play";
      break;
    case "image":
      cursorContent.className = "fa-solid fa-pause";
      break;
    default:
      cursorContent.className = "fa-solid fa-arrow-up-right"; 
      break;
  }
}

window.onmousemove = e => {
  const interactable = e.target.closest(".interactable"),
        interacting = interactable !== null;
  
  animateCursor(e, interacting);
  
  cursor.dataset.type = interacting ? interactable.dataset.type : "";
  
  if(interacting) {
    updateCursorContent(interactable.dataset.type);
  } else {
    // 离开交互元素时恢复默认光标
    updateCursorContent("");
  }
}

补充说明 #

• 用<span>替代<i>作为光标内容容器，同时支持文本和图标展示
• 新增updateCursorContent函数统一处理光标内容切换逻辑
• 给文本添加字体样式，确保'play'在放大后的光标中显示清晰
• 补充了非交互状态的光标重置逻辑，避免残留文本或图标

内容的提问来源于stack exchange，提问作者gjjr