如何通过text rollover实现文字悬停时显示对应图片的效果

零依赖实现方案（原生HTML+CSS+JS） #

无需引入任何第三方组件，仅用浏览器原生能力即可实现，效果和原生title属性一致，且支持自定义样式：

1. 基础HTML结构 #

给需要触发悬停效果的文本添加统一类名和自定义属性存储图片地址，同时预置一个全局悬浮容器：

<!-- 业务文本内容 -->
<p>示例文本：<span class="hover-with-img" data-img-src="此处替换为你的图片路径">悬停这段文字查看图片</span></p>

<!-- 全局悬浮弹窗容器，默认隐藏 -->
<div id="img-popup" style="display:none;position:fixed;z-index:99999;pointer-events:none;padding:3px;background:#fff;border:1px solid #ccc;border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,0.2);">
  <img id="popup-img" style="max-width:240px;max-height:240px;display:block;" alt="">
</div>

2. 原生JS实现交互逻辑 #

直接将这段代码插入页面<script>标签即可，无需额外依赖：

const popup = document.getElementById('img-popup')
const popupImg = document.getElementById('popup-img')
const hoverElements = document.querySelectorAll('.hover-with-img')

hoverElements.forEach(el => {
  // 鼠标进入时显示弹窗
  el.addEventListener('mouseenter', () => {
    const imgSrc = el.getAttribute('data-img-src')
    if (!imgSrc) return
    popupImg.src = imgSrc
    popup.style.display = 'block'
  })

  // 鼠标移动时更新弹窗位置，跟随指针
  el.addEventListener('mousemove', e => {
    // 偏移12px避免遮挡鼠标
    let left = e.clientX + 12
    let top = e.clientY + 12
    // 可选：边界检测，避免弹窗超出可视区
    if (left + popup.offsetWidth > window.innerWidth) left = e.clientX - popup.offsetWidth - 12
    if (top + popup.offsetHeight > window.innerHeight) top = e.clientY - popup.offsetHeight - 12
    popup.style.left = `${left}px`
    popup.style.top = `${top}px`
  })

  // 鼠标离开时隐藏弹窗
  el.addEventListener('mouseleave', () => {
    popup.style.display = 'none'
    popupImg.src = ''
  })
})

可选优化项 #

• 要实现类似原生title的延迟显示效果，可在mouseenter时加setTimeout延时控制弹窗显示，mouseleave时清除定时器即可
• 要更顺滑的显隐动效，可将display控制改为opacity+visibility控制，搭配CSStransition实现过渡效果
• 可自由修改容器的CSS样式调整弹窗外观，适配你的页面风格

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