鼠标悬停加载图片：多span元素下目标span选择失败求助

你遇到的问题核心是选择器匹配范围不对：原来的$(this).siblings('span')会选中和.trigger同级的第一个span（也就是带tooltiptext类的容器span），而不是你真正需要的、嵌套在tooltip内部的带data-original属性的span。

直接修改你的jQuery选择逻辑，就能精准定位目标元素：

修改后的完整脚本 #

$(document).ready(function($) {
    $('.trigger').mouseover(function() {
        // 找到tooltip容器内带data-original属性的span
        var elem = $(this).closest('.tooltip').find('span[data-original]');
        var src = elem.attr('data-original');
        elem.replaceWith('<img src="' + src + '"/>');
    });
    $('.trigger').mouseout(function() {
        // 找到tooltip容器内的img元素
        var elem = $(this).closest('.tooltip').find('img');
        var src = elem.attr('src');
        elem.replaceWith('<span data-original="'+src+'"></span>');
    });
});

关键修改点解释 #

• $(this).closest('.tooltip')：先定位到当前.trigger所在的最外层.tooltip容器，确保查找范围被限定在这个容器内，不会干扰页面其他元素。
• .find('span[data-original]')：在容器内部筛选出带有data-original属性的span，这就是你要替换的目标元素，不管它嵌套多少层都能精准命中。
• 鼠标移出时的find('img')同理，替换后生成的img也在同一个tooltip容器内，能准确找到并替换回span。

这样修改后，脚本就能正确识别到目标span，完成图片的切换效果了。

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