动态图片切换与原始状态恢复：基于 jQuery 的通用解决方案

<style>
    /* 示例样式，用于演示 opacity-0 效果 */
    .opacity-0 {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
    .some-name {
        position: absolute; /* 示例，根据实际布局调整 */
        background-color: rgba(0,0,0,0.7);
        color: white;
        padding: 5px 10px;
        border-radius: 3px;
        pointer-events: none; /* 确保不阻挡鼠标事件 */
    }
    .img-set img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    .hotspots a {
        display: inline-block;
        margin: 5px;
        padding: 8px 15px;
        background-color: #007bff;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        cursor: pointer;
    }
    .hotspots a:hover {
        background-color: #0056b3;
    }

    /* 如果有多个切换区域，可以包裹在一个容器中 */
    .section-container {
        border: 1px solid #ccc;
        padding: 15px;
        margin-bottom: 20px;
        background-color: #f9f9f9;
    }
</style>

<div class="section-container">
    <div class="col-12 text-center">
        <h3>产品详情</h3>
        <div class="name-wrapper">
            <span id="name1" class="some-name opacity-0">产品特性A</span>
            <span id="name2" class="some-name opacity-0">产品特性B</span>
        </div>
    </div>
    <div class="col-12">
        <div class="img-set">
            <img src="images/2023/original-product.jpg" alt="原始产品图" />
        </div>
        <div class="hotspots">
            <a href="#"  data-target="name1">查看特性A</a>
            <a href="#"  data-target="name2">查看特性B</a>
        </div>
    </div>
</div>

<div class="section-container">
    <div class="col-12 text-center">
        <h3>配件展示</h3>
        <div class="name-wrapper">
            <span id="name3" class="some-name opacity-0">配件型号X</span>
            <span id="name4" class="some-name opacity-0">配件型号Y</span>
        </div>
    </div>
    <div class="col-12">
        <div class="img-set">
            <img src="images/2023/original-accessory.jpg" alt="原始配件图" />
        </div>
        <div class="hotspots">
            <a href="#"  data-target="name3">查看型号X</a>
            <a href="#"  data-target="name4">查看型号Y</a>
        </div>
    </div>
</div>

// 错误的示例
var original = document.getElementsByClassName(".img-set img").getAttribute("src");

$(document).ready(function() {
    // 遍历所有 .img-set 内部的 img 元素，并存储其原始 src
    $('.img-set img').each(function() {
        $(this).data('original-src', $(this).attr('src'));
    });

    // ... 后续的 mouseover 和 mouseout 事件处理
});

$(document).ready(function() {
    // 1. 在页面加载时，为每个主图片存储其原始 src 属性
    // 这允许每个图片区域独立管理其原始状态
    $('.img-set img').each(function() {
        $(this).data('original-src', $(this).attr('src'));
    });

    // 2. 鼠标悬停事件处理
    // 当鼠标悬停在 .hotspots a 元素上时
    $(".hotspots a").mouseover(function() {
        var $currentLink = $(this); // 当前触发事件的链接元素
        var newSrc = $currentLink.attr('data-src'); // 获取新的图片路径

        // 找到当前链接所属区域的主图片元素
        // .closest('.col-12') 向上找到最近的 .col-12 父级
        // .find('.img-set img') 在该父级内查找 .img-set img
        var $targetImage = $currentLink.closest('.col-12').find('.img-set img');

        // 切换主图片的 src
        $targetImage.attr("src", newSrc);

        // 处理关联文本元素的显示
        var targetNameId = $currentLink.data("target");
        $("#" + targetNameId).removeClass("opacity-0");
    });

    // 3. 鼠标移出事件处理
    // 当鼠标从 .hotspots a 元素移出时
    $(".hotspots a").mouseout(function() {
        var $currentLink = $(this); // 当前触发事件的链接元素

        // 找到当前链接所属区域的主图片元素
        var $targetImage = $currentLink.closest('.col-12').find('.img-set img');

        // 从图片元素的 data-original-src 属性中获取原始图片路径
        var originalSrc = $targetImage.data('original-src');

        // 恢复主图片的 src 为原始路径
        $targetImage.attr("src", originalSrc);

        // 处理关联文本元素的隐藏
        var targetNameId = $currentLink.data("target");
        $("#" + targetNameId).addClass("opacity-0");
    });
});