Elementor中鼠标悬停文本显示随动图片前端失效问题求助

我是使用WordPress、Elementor和Crocoblock的无代码网页设计师，首次提问。我想实现鼠标悬停文本时显示随鼠标移动的图片，代码在Elementor编辑器后台能正常运行，但前端正式页面里，图片只会固定显示，没法跟着鼠标移动。原代码放在HTML小部件里，内容如下：

<script>
    var tooltips = document.querySelectorAll('.tooltip span');

window.onmousemove = function (e) {
    var x = (e.clientX + 20) + 'px',
        y = (e.clientY + 20) + 'px';
    for (var i = 0; i < tooltips.length; i++) {
        tooltips[i].style.top = y;
        tooltips[i].style.left = x;
    }
};
</script>

</style>
    .tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:inline-block !important;
    position:fixed !important;
    overflow:hidden !important;
}

a.tooltip {
    font-size: 7.5vw;
    font-family: 'Inter';
    font-weight: 600;
    text-transform: uppercase;
    color: #000 !important; 
    letter-spacing: -0.5rem;
    line-height: 1rem
}
</style>

<a class="tooltip" href="#">
    Nhat Nguyen
    <span>
        <img class="follow" alt="" src="https://nhat-kd.dk/wp-content/uploads/2023/09/founder_img2.jpg" />
    </span>
</a>

问题原因分析 #

1. CSS语法错误：代码里多了一个闭合的</style>标签，导致部分CSS在前端可能不生效
2. 脚本执行时机问题：原脚本直接在页面加载时运行，但Elementor前端是动态渲染内容，此时.tooltip span元素还未生成，脚本找不到目标元素，无法绑定鼠标移动事件
3. 事件监听冗余：全局监听鼠标移动，不管是否处于hover状态，既浪费性能也可能和其他脚本冲突

修复后的代码 #

把以下代码替换原HTML小部件里的内容：

<style>
.tooltip {
    text-decoration: none;
    position: relative;
}
.tooltip span {
    display: none;
    position: fixed;
    overflow: hidden;
    pointer-events: none; /* 避免图片遮挡鼠标导致hover失效 */
    z-index: 9999; /* 确保图片在最上层 */
}
.tooltip:hover span {
    display: inline-block;
}

a.tooltip {
    font-size: 7.5vw;
    font-family: 'Inter';
    font-weight: 600;
    text-transform: uppercase;
    color: #000 !important; 
    letter-spacing: -0.5rem;
    line-height: 1rem;
}
</style>

<a class="tooltip" href="#">
    Nhat Nguyen
    <span>
        <img class="follow" alt="" src="https://nhat-kd.dk/wp-content/uploads/2023/09/founder_img2.jpg" />
    </span>
</a>

<script>
// 等待DOM完全加载后执行脚本
document.addEventListener('DOMContentLoaded', function() {
    const tooltips = document.querySelectorAll('.tooltip');
    
    tooltips.forEach(tooltip => {
        const tooltipSpan = tooltip.querySelector('span');
        
        // 只在hover时监听鼠标移动
        tooltip.addEventListener('mouseenter', function() {
            const moveHandler = function(e) {
                const x = (e.clientX + 20) + 'px';
                const y = (e.clientY + 20) + 'px';
                tooltipSpan.style.top = y;
                tooltipSpan.style.left = x;
            };
            
            window.addEventListener('mousemove', moveHandler);
            
            // 鼠标离开时移除监听
            tooltip.addEventListener('mouseleave', function() {
                window.removeEventListener('mousemove', moveHandler);
            }, { once: true });
        });
    });
});
</script>

关键修改说明 #

1. 修复CSS语法错误，移除多余的</style>标签
2. 给tooltip的span添加pointer-events: none，避免图片遮挡鼠标导致hover状态意外中断
3. 脚本改为等待DOMContentLoaded后执行，确保能正确找到Elementor渲染后的元素
4. 只在鼠标hover到文本上时才监听鼠标移动事件，离开后立即移除监听，提升性能
5. 每个tooltip单独绑定事件，避免多个tooltip互相干扰

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