e.target.src仅更改为第一张图像

Question

我有两个部分，第一部分有几个图像，第二部分只有一个图像，其显示设置为无。

将鼠标悬停在这些图像上时，我想将单个图像的src更改为仅将其更改为第一张图像

Javascript：

 function gridHover() {
    const gridImages = document.querySelectorAll('.grid figure img');
    gridImages.forEach(function(picture){
        picture.addEventListener('mouseover', (e)=>{
            const thumbnails = document.querySelector('.thumbnails');
            thumbnails.style.display = 'block';
            thumbnails.src = e.target.src;
            console.log(e.target.src);
        })
    })
}
gridHover();

HTML

    <section class="grid-container">
        <div class="grid-title">
            <h1>After August</h1>
        </div>
        <div class="grid">
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_01.jpg" alt="">
                </figure>
            </article>
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_02.jpg" alt="">
                </figure>
            </article>
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_03.jpg" alt="">
                </figure>
            </article>
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_04.jpg" alt="">
                </figure>
            </article>
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_05.jpg" alt="">
                </figure>
            </article>
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_06.jpg" alt="">
                </figure>
            </article>
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_07.jpg" alt="">
                </figure>
            </article>
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_08.jpg" alt="">
                </figure>
            </article>
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_09.jpg" alt="">
                </figure>
            </article>
        </div>
    </section>


    <section class="thumbnails">
        <img src="../assets/media/images/after-august/after-august_01.jpg" alt="">
    </section>

Dunno怎么了，我的代码似乎还不错。我尝试了console.log（e.target.src），它可以正常显示实际图像。

Answer 1

在const thumbnails变量中选择缩略图类中的img。

function gridHover() {
        const gridImages = document.querySelectorAll('.grid figure img');
        gridImages.forEach(function(picture){
            picture.addEventListener('mouseover', (e)=>{
                const thumbnails = document.querySelector('.thumbnails img');
                thumbnails.style.display = 'block';
                thumbnails.src = e.target.src;
                console.log(e.target.src);
            })
        })
    }
    gridHover();