如何实现鼠标悬停文本时显示对应图片的前端交互动效

这个效果通常称为文本悬停跟随预览图效果，大多场景不需要依赖大型JS库，手写核心逻辑即可实现，也可以选用轻量的专项JS库快速落地。

核心实现思路 #

• 基础结构准备：为每个需要触发悬停效果的文本项绑定对应图片资源，可以通过data-*自定义属性存储图片地址；悬停展示的图片设置为绝对定位，默认opacity: 0隐藏，同时添加pointer-events: none避免图片本身干扰鼠标事件判断。
• 事件监听配置：给所有文本触发项绑定三个事件：
  • mouseenter事件触发时，替换图片元素的资源地址、设置opacity: 1显示图片，可搭配transition属性实现淡入过渡效果
  • mousemove事件触发时，实时读取鼠标的clientX、clientY坐标，动态更新图片的left、top属性，可设置固定偏移量避免图片挡住鼠标光标
  • mouseleave事件触发时，设置opacity: 0隐藏图片
• 性能优化：用requestAnimationFrame包裹坐标更新逻辑，降低高频事件触发的性能损耗；提前预加载所有关联图片，避免悬停时才加载出现空白延迟。

简化版核心代码示例 #

.hover-image {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 999;
  width: 300px;
  height: auto;
}
.work-item {
  cursor: pointer;
}

const workItems = document.querySelectorAll('.work-item')
const hoverPreviewImg = document.querySelector('.hover-image')

workItems.forEach(item => {
  // 从自定义属性读取对应图片地址
  const targetImg = item.dataset.previewImg
  
  item.addEventListener('mouseenter', () => {
    hoverPreviewImg.src = targetImg
    hoverPreviewImg.style.opacity = '1'
  })
  
  item.addEventListener('mousemove', (e) => {
    // 20px为鼠标和图片的偏移量，可自行调整
    hoverPreviewImg.style.left = `${e.clientX + 20}px`
    hoverPreviewImg.style.top = `${e.clientY + 20}px`
  })
  
  item.addEventListener('mouseleave', () => {
    hoverPreviewImg.style.opacity = '0'
  })
})

<!-- 示例HTML结构 -->
<div class="works-list">
  <div class="work-item" data-preview-img="作品1的图片地址">作品1名称</div>
  <div class="work-item" data-preview-img="作品2的图片地址">作品2名称</div>
  <div class="work-item" data-preview-img="作品3的图片地址">作品3名称</div>
</div>
<img class="hover-image" alt="作品预览">

如果想要快速实现更复杂的动效（比如图片切换的形变、遮罩过渡等），可以选用专门处理悬停图片动效的轻量JS库，仅需少量配置即可落地。

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