本文详解如何利用 HTML data-img 属性，在鼠标悬停时动态设置并显示自定义光标内的 元素，同时通过 CSS 隐藏空 src 图片，实现轻量、高性能的交互式光标效果。
本文详解如何利用 html `data-img` 属性，在鼠标悬停时动态设置并显示自定义光标内的 `` 元素，同时通过 css 隐藏空 src 图片，实现轻量、高性能的交互式光标效果。
在构建现代网页的自定义光标（custom cursor）体验时，常需根据目标元素的语义动态增强光标行为——例如显示文字标签、切换样式，或加载专属图片。本教程聚焦于按需展示图片这一高频需求：当用户悬停在带有 data-img 属性的元素上时，将该路径注入光标容器内的 标签，并确保无图状态时图片完全不可见，避免 DOM 冗余与布局干扰。
✅ 核心实现思路
我们不采用动态创建/销毁 元素的复杂方案（易引发重排、影响性能），而是采用「静态占位 + CSS 智能隐藏」策略：
- HTML 中始终保留
（轻量、无渲染开销）；
- JavaScript 仅负责在 mouseover 时写入 src，mouseleave 时清空；
- CSS 通过属性选择器 .cursor__img[src=''] { display: none; } 精准隐藏空图，无需 JS 控制显隐状态，兼顾简洁性与性能。
? 示例代码整合
以下为关键逻辑的精简整合版（已适配原项目结构）：
// 获取光标图片容器（确保 DOM 已就绪）
const myImage = document.querySelector('.cursor__img');
// 查找所有带 data-img 的可交互元素（如 .test-image）
const hasImgElements = document.querySelectorAll('.test-image');
hasImgElements.forEach(el => {
const imgPath = el.dataset.img;
el.addEventListener('mouseenter', () => {
if (imgPath) {
myImage.src = imgPath; // 直接赋值，触发加载
}
});
el.addEventListener('mouseleave', () => {
myImage.src = ''; // 清空 src，CSS 自动隐藏
});
});对应 CSS 补充规则（必须添加）：
/* 隐藏 src 为空的 cursor__img */
.cursor__img[src=''] {
display: none;
}
/* 可选：统一尺寸与定位，避免布局抖动 */
.cursor__img {
width: 25px;
height: 25px;
position: absolute;
top: 8px;
left: 8px;
pointer-events: none;
z-index: 1001;
}? 注意：.cursor__img 应置于 .cursor 容器内，且推荐使用 position: absolute 定位（相对于 .cursor 的 position: fixed），避免影响光标主体定位逻辑；同时设置 pointer-events: none 防止遮挡底层交互。
⚠️ 注意事项与最佳实践
- 路径有效性：确保 data-img 值为有效 URL（支持相对路径或绝对 URL），无效路径会导致控制台警告但不影响功能；
- 性能优先：本方案避免频繁 DOM 操作（如 appendChild/removeChild），符合原项目对 Safari 等浏览器的性能优化目标；
- 可访问性提示：若图片具语义意义（如图标含义），建议同步设置 alt 属性（例如 myImage.alt = 'Preview icon';），并在 mouseleave 时重置；
-
错误兜底：如需增强鲁棒性，可在 mouseenter 中加入图片加载失败监听：
myImage.onerror = () => myImage.src = '';
✅ 总结
通过 data-img 属性驱动、src 动态绑定 + CSS 属性选择器隐藏的组合方案，你能在保持代码简洁、性能优异的前提下，灵活扩展自定义光标的功能边界。它无缝融入现有光标系统，无需重构运动逻辑，是现代 Web 交互动效中「语义化、轻量化、可维护」的典型实践。
