如何用纯JavaScript实现鼠标悬停文本切换图片效果？

以下是替代你提供的jQuery代码的原生JavaScript实现，逻辑完全对应原功能：

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有带有data-showme属性的触发元素
    const triggerElements = document.querySelectorAll('[data-showme]');
    
    triggerElements.forEach(element => {
        // 给每个触发元素添加鼠标悬停事件
        element.addEventListener('mouseover', function(event) {
            event.preventDefault();
            // 获取当前元素绑定的目标图片类名
            const targetClass = this.dataset.showme;
            
            // 隐藏所有带有all-img类的图片
            const allImages = document.querySelectorAll('.all-img');
            allImages.forEach(img => {
                img.style.display = 'none';
            });
            
            // 显示对应类名的目标图片
            const targetImage = document.querySelector(`.${targetClass}`);
            if (targetImage) {
                targetImage.style.display = 'block';
            }
        });
    });
});

关键逻辑说明 #

• 原jQuery的$(document).ready()对应原生的DOMContentLoaded事件，确保DOM加载完成后再执行操作
• $('[data-showme]').hover(...)转换为给每个匹配元素绑定mouseover事件（若需要处理悬停离开的逻辑，可额外添加mouseout事件）
• $(this).attr('data-showme')用原生DOM的this.dataset.showme替代，更简洁规范
• $('.all-img').hide()对应遍历所有.all-img元素，设置style.display = 'none'实现隐藏
• $('.' + showme).show()对应获取目标元素后设置style.display = 'block'（如果你的图片原本是inline-block等其他显示方式，可替换为对应值）

配套HTML结构要求 #

• 触发悬停的文本元素需带data-showme属性，值为对应图片的类名：

  <span data-showme="img-1">悬停切换图片1</span>
  <span data-showme="img-2">悬停切换图片2</span>
  

• 图片元素需同时包含all-img类和对应目标类名，初始可默认隐藏：

  <img src="image1.jpg" class="all-img img-1" style="display:none;">
  <img src="image2.jpg" class="all-img img-2" style="display:none;">
  

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