如何通过 data 属性动态控制自定义光标中的图片显示与隐藏-html教程-PHP中文网

如何通过 data 属性动态控制自定义光标中的图片显示与隐藏

本文详解如何利用 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 = '';
```