鼠标悬停图片下滑效果异常：多gy-section仅首个生效求助

问题说明 #

需求是实现鼠标悬停时图片向下滑动的效果，但页面中存在多个.gy-section元素时，仅第一个元素的图片能触发滑动效果，其余元素完全无响应。尝试过修改类名、新增类、将类转为id、调整JavaScript代码，均未解决问题。

问题根源 #

原代码中使用document.querySelector(".gy-section")只会获取第一个匹配该类名的元素，事件监听器也只绑定到了这一个元素上，其他.gy-section元素根本没有绑定鼠标事件，所以不会产生任何效果。同时，全局获取.gy-sec-img和.gy-simg-title的方式也无法对应到每个gy-section内部的子元素，逻辑上也不成立。

修复代码 #

HTML（多元素示例） #

<div class="container">
    <div class="gallery">
        <div class="gy-section">
            <div class="gy-sec-img"></div>
            <div class="gy-simg-title">标题1</div>
        </div>
        <div class="gy-section">
            <div class="gy-sec-img"></div>
            <div class="gy-simg-title">标题2</div>
        </div>
        <div class="gy-section">
            <div class="gy-sec-img"></div>
            <div class="gy-simg-title">标题3</div>
        </div>
    </div>
</div>

JavaScript #

// 获取所有gy-section元素
const gySections = document.querySelectorAll(".gy-section");

// 遍历每个section，绑定事件
gySections.forEach(gyHover => {
    // 从当前section内部获取对应的子元素
    const gySection = gyHover.querySelector(".gy-sec-img");
    const gyText = gyHover.querySelector(".gy-simg-title");

    // 鼠标进入事件
    gyHover.addEventListener('mouseenter', async function up() {
        const currentPos = gySection.backgroundPositionY;

        gySection.animate([
            { backgroundPositionY: currentPos },
            { backgroundPositionY: '100%'}
        ], {
            duration: 4000,
            easing: 'ease-in-out',
            iterations: 1,
        });

        gyHover.classList.add('gys-hover');
        gySection.classList.add('gys-hover');
        gyText.classList.add('gst-hover');
        await new Promise(resolve => setTimeout(resolve, 3999));
        gySection.style.backgroundPositionY = "100%";
    });

    // 鼠标离开事件
    gyHover.addEventListener('mouseleave', async function down() {
        const currentPos = gySection.backgroundPositionY;

        gySection.animate([
            { backgroundPositionY: currentPos },
            { backgroundPositionY: '0%'}
        ], {
            duration: 4000,
            easing: 'ease-in-out',
            iterations: 1,
        });

        gyHover.classList.remove('gys-hover');
        gySection.classList.remove('gys-hover');
        gyText.classList.remove('gst-hover');
        await new Promise(resolve => setTimeout(resolve, 3999));
        gySection.style.backgroundPositionY = "0%";
    });
});

修复逻辑说明 #

1. 用document.querySelectorAll(".gy-section")获取所有目标元素，而不是只拿第一个。
2. 遍历每个gy-section，在每个元素内部通过querySelector找到对应的.gy-sec-img和.gy-simg-title，确保每个section的事件只作用于自己内部的子元素。
3. 事件监听器绑定到每个gy-section上，这样每个元素都能响应鼠标悬停/离开事件。

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