基于data属性动态显示悬停自定义光标图片

本文介绍如何在自定义光标（custom cursor）中，通过监听元素的 data-img 属性，在鼠标悬停时动态加载并显示对应图片，同时保持 DOM 轻量——图片仅在需要时渲染，空状态自动隐藏。

如何让网站交互更上一层楼？当用户鼠标滑过作品集卡片或商品链接时，光标区域不仅能改变形状，还能即时浮现出一张相关预览图。这种动态反馈，能极大提升界面的沉浸感和信息传递效率。

本文探讨的正是如何在现有高性能自定义光标系统上，实现“悬停即显图”的功能。核心目标明确：通过监听元素的 data-img 属性，在鼠标悬停时动态加载并显示对应图片，同时保持 DOM 轻量——图片仅在需要时渲染，空状态自动隐藏。

核心思路：CSS 驱动显隐，JS 负责数据绑定

要实现这个功能，最直观的方法是在 JavaScript 中动态创建和销毁 元素。但频繁的 DOM 操作会带来性能开销，尤其在 Safari 等浏览器中，可能导致渲染抖动。

更优雅高效的方案是“职责分离”：
HTML 中保留一个静态的 ）；
CSS 通过属性选择器自动控制其可见性；
JS 仅负责读取 data-img 并更新 src 属性。

这样一来，DOM 结构保持稳定，所有显隐逻辑交给高效的 CSS，JavaScript 只做最轻量的数据绑定。该方案在 Chrome、Firefox、Safari 等主流浏览器上均能稳定运行。

实现步骤

1. HTML 结构（保持简洁）

首先，确保光标容器 .cursor 内部已包含目标图片元素，典型结构如下：

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

现在通过 JavaScript 将数据与交互串联起来。复用已有的选择器逻辑，精准匹配带有 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 = ''; // 清空 src，触发 CSS 隐藏规则
  });
});

提示：为获得更流畅的体验，可在 mouseenter 事件中主动预加载图片（如上代码所示），避免图片第一次请求时出现短暂空白或延迟。

4. 增强健壮性（可选但推荐）

为让功能更可靠，可考虑以下优化：

• 添加错误处理：监听图片的 error 事件，应对加载失败情况。

  cursorImg.addEventListener('error', () => {
    cursorImg.style.display = 'none';
  });

• 选用合适事件：使用 mouseenter / mouseleave 而非 mouseover / mouseout，可避免事件在元素子节点间冒泡导致的干扰。
• 彻底清空属性：在 mouseleave 中重置 src 后，可额外调用 cursorImg.removeAttribute('src')，让属性状态更干净，在某些旧版本浏览器中兼容性更好。

总结

整体来看，该方案遵循“最小变更、最大兼容”原则：
无需改动现有光标移动逻辑（此前基于 transform 和防抖的高性能跟随代码可原封不动保留）；
不引入任何新依赖或复杂状态管理库，纯粹依赖原生 JavaScript 和 CSS 属性驱动；
在性能与可维护性之间取得平衡——DOM 静态稳定、样式集中控制、业务逻辑清晰。

最终效果：当用户悬停在类似

这样的元素上时，光标右上角会平滑浮现对应图片；鼠标移开后，图片自动隐藏。整个过程流畅无闪烁，完美融入现有优化后的光标架构。