本文介绍如何在自定义光标（custom cursor）中，通过监听元素的 data-img 属性，在鼠标悬停时动态加载并显示对应图片，同时保持 DOM 轻量——图片仅在需要时渲染，空状态自动隐藏。
本文介绍如何在自定义光标（custom cursor）中，通过监听元素的 `data-img` 属性，在鼠标悬停时动态加载并显示对应图片，同时保持 dom 轻量——图片仅在需要时渲染，空状态自动隐藏。
在构建高性能、视觉丰富的自定义光标系统时，一个常见需求是：当用户悬停在特定元素（如项目卡片、链接或图文标签）上时，光标区域不仅改变样式或显示文字，还能动态加载并展示一张关联缩略图，从而增强交互反馈与沉浸感。本教程将基于你已有的轻量级光标逻辑（使用 transform 实现高性能跟随），提供一套简洁、健壮且跨浏览器友好的实现方案。
✅ 核心思路：CSS 驱动显隐，JS 负责数据绑定
与其在 JavaScript 中反复创建/销毁 <img> 元素（带来不必要的 DOM 操作开销），我们采用更高效的方式：
✅ HTML 中保留一个静态 <img> 元素（如 <img src="" class="cursor__img">）；
✅ CSS 通过属性选择器自动控制其可见性；
✅ JS 仅负责读取 data-img 并更新 src 属性。
这样既避免了频繁的 DOM 插入/移除，又确保了 Safari、Chrome、Firefox 等主流浏览器下的稳定表现（尤其规避了 Safari 中因动态节点导致的渲染抖动问题）。
? 实现步骤
1. HTML 结构（保持简洁）
确保你的 .cursor 容器内已包含目标 <img> 元素：
<div class="cursor"> <span></span> <div class="cursor__label"></div> <img src="" class="cursor__img"> <!-- 初始 src 为空，由 JS 控制 --> </div>
2. CSS 控制显隐逻辑（关键！）
添加以下 CSS 规则，让 src="" 的图片自动隐藏：
.cursor__img[src=''] {
display: none;
}
/* 可选：统一尺寸与定位 */
.cursor__img {
width: 25px;
height: 25px;
position: absolute;
top: 8px;
left: 8px;
pointer-events: none; /* 确保不干扰鼠标事件 */
z-index: 2;
}⚠️ 注意：pointer-events: none 是必须的，否则图片可能遮挡底层元素，导致 mouseleave 误触发。
3. JavaScript 绑定 data-img
复用你已有的选择器逻辑，精准匹配含 data-img 的元素（例如 .test-image）：
const hasImg = document.querySelectorAll('.test-image');
const cursorImg = document.querySelector('.cursor__img');
hasImg.forEach(item => {
const imgSrc = item.dataset.img;
item.addEventListener('mouseenter', () => {
if (imgSrc) {
cursorImg.src = imgSrc;
// 可选：预加载图片防止首次悬停闪烁（见下方提示）
const img = new Image();
img.src = imgSrc;
}
});
item.addEventListener('mouseleave', () => {
cursorImg.src = ''; // 触发 .cursor__img[src=''] 隐藏规则
});
});? 提示：为提升体验，可在 mouseenter 中主动预加载图片（如上所示），避免首次悬停时出现空白延迟。
4. 增强健壮性（可选但推荐）
- ✅ 添加 error 事件监听，处理图片加载失败：
cursorImg.addEventListener('error', () => { cursorImg.style.display = 'none'; }); - ✅ 使用 mouseenter / mouseleave 替代 mouseover / mouseout，避免子元素冒泡干扰；
- ✅ 在 mouseleave 中重置 src 后，可额外调用 cursorImg.removeAttribute('src') 以彻底清空属性（部分旧版浏览器兼容更稳）。
? 总结
本方案以「最小变更、最大兼容」为原则：
? 不修改现有光标移动逻辑（仍基于 transform + setTimeout 防抖）；
? 不引入新依赖或复杂状态管理，纯原生 JS + CSS 属性驱动；
? 兼顾性能与可维护性——DOM 静态、样式可控、逻辑清晰。
最终效果：当用户悬停在 <p class="test-image" data-img="path/to/img.png"> 上时，光标右上角将平滑浮现对应图片；移出后自动隐藏，整个过程无闪烁、无卡顿，完美适配你当前优化过的光标架构。
