如何用JavaScript实现鼠标悬停文本时切换图片

步骤1：调整HTML结构 #

给每个文本链接添加data-img属性存储对应悬停图的地址，同时给图片元素设置ID方便JS获取：

<div class="topics">
    <div class="links">
        <a href="#" data-img="topic1-hover.jpg"><p> Topic 1 </p></a>
        <a href="#" data-img="topic2-hover.jpg"><p> Topic 2 </p></a>
        <a href="#" data-img="topic3-hover.jpg"><p> Topic 3 </p></a>
    </div>
        
    <div class="image"> 
        <img id="main-img" src="default.jpg" alt="默认图片">
    </div>
</div>

步骤2：编写JavaScript逻辑 #

通过监听链接的mouseover和mouseout事件，实现图片切换与恢复：

// 获取核心元素并存储默认图片地址
const mainImg = document.getElementById('main-img');
const topicLinks = document.querySelectorAll('.links a');
const defaultImgSrc = mainImg.src;

// 给每个链接绑定事件
topicLinks.forEach(link => {
    // 鼠标悬停时切换到对应图片
    link.addEventListener('mouseover', () => {
        mainImg.src = link.dataset.img;
    });

    // 鼠标移开时恢复默认图片
    link.addEventListener('mouseout', () => {
        mainImg.src = defaultImgSrc;
    });
});

优化方案：事件委托（适配动态新增链接） #

如果后续需要动态添加链接，用事件委托只需绑定一次事件，更高效：

const mainImg = document.getElementById('main-img');
const defaultImgSrc = mainImg.src;
const linksContainer = document.querySelector('.links');

// 父容器监听鼠标进入事件
linksContainer.addEventListener('mouseover', (e) => {
    const targetLink = e.target.closest('a');
    if (targetLink) {
        mainImg.src = targetLink.dataset.img;
    }
});

// 父容器监听鼠标离开事件
linksContainer.addEventListener('mouseout', (e) => {
    const targetLink = e.target.closest('a');
    if (targetLink) {
        mainImg.src = defaultImgSrc;
    }
});

关键说明 #

• data-img是HTML5自定义数据属性，专门用来存储元素关联的额外数据，方便JS读取。
• 事件委托利用事件冒泡特性，仅在父容器绑定事件就能处理所有子链接的交互，适合动态生成内容的场景。
• 提前存储默认图片地址，避免每次鼠标移开时重复读取原地址，提升性能。

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