e.target.src只换第一张图

Question

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

将鼠标悬停在这些图像上时，我想更改单个图像 src 的 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>

不知道怎么了，我的代码似乎没问题。我尝试 console.log(e.target.src)，它正常给我实际图像。

Answer 1

select img inside thumbnails class in const thumbnails 变量。

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();

e.target.src只换第一张图

e.target.src only change to the first image

javascript

mouseover