如何用CSS实现鼠标光标旁的悬停文本效果？参考站点：http://manuelraeder.co.uk/

当然可以实现这个效果！我之前也研究过类似的交互，其实核心是结合CSS的定位能力和JavaScript的鼠标事件监听，就能做出跟随光标且随图片切换文本的效果。下面给你一套完整的可落地方案：

• 先创建一个全局的跟随文本容器，默认隐藏，用绝对定位脱离文档流，避免影响页面布局
• 给每张图片绑定鼠标事件：
  • 鼠标移入图片时，显示容器并更新对应的提示文本
  • 鼠标在图片上移动时，让容器跟着光标位置同步偏移
  • 鼠标移出图片时，隐藏容器

HTML结构 #

我们用data-*属性给每张图片存储对应的提示文本，后续直接读取这个属性内容即可：

<div class="image-group">
  <img src="your-image-1.jpg" alt="作品1" data-tooltip-text="这是第一张作品的描述文本">
  <img src="your-image-2.jpg" alt="作品2" data-tooltip-text="这是第二张作品的专属介绍">
  <img src="your-image-3.jpg" alt="作品3" data-tooltip-text="这是第三张作品的详细说明">
</div>

<!-- 跟随光标提示的容器 -->
<div class="cursor-tooltip" id="cursorTooltip"></div>

CSS样式 #

设置提示容器的外观和基础定位规则，默认隐藏，激活时显示：

.cursor-tooltip {
  position: fixed;
  pointer-events: none; /* 避免遮挡鼠标事件，确保图片能正常响应交互 */
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 9999; /* 确保提示在最上层 */
}

.cursor-tooltip.active {
  opacity: 1;
}

JavaScript逻辑 #

监听鼠标的移入、移动、移出事件，实现文本切换和光标跟随：

const tooltip = document.getElementById('cursorTooltip');
const targetImages = document.querySelectorAll('.image-group img');

targetImages.forEach(img => {
  // 鼠标移入图片时，加载对应文本并显示提示
  img.addEventListener('mouseenter', () => {
    const tooltipText = img.getAttribute('data-tooltip-text');
    tooltip.textContent = tooltipText;
    tooltip.classList.add('active');
  });

  // 鼠标移动时，同步更新提示容器的位置（加偏移量避免遮挡光标）
  img.addEventListener('mousemove', (e) => {
    tooltip.style.left = `${e.clientX + 12}px`;
    tooltip.style.top = `${e.clientY + 12}px`;
  });

  // 鼠标移出图片时，隐藏提示容器
  img.addEventListener('mouseleave', () => {
    tooltip.classList.remove('active');
  });
});

• 使用data-tooltip-text属性存储文本，既方便维护，也能让每张图片的提示内容灵活定制
• position: fixed确保提示容器始终相对于视口定位，不会随页面滚动出现错位
• pointer-events: none是核心细节，它能让提示容器不拦截鼠标事件，保证图片的交互不受影响
• 光标偏移量（12px）可以根据你的需求调整，目的是让提示文本不挡住光标本身，提升交互体验

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