Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by eslam said
eslam said
Courses Plus Student 6,734 Points

mouseover

i have a mouseover event when i hover over an image it shows another image somewhere else, but when i put the mouse out of the image the new image is still shown, i want it only to be visible when i hover over the image

   let projectImgs = document.querySelectorAll('figure img');
for ( i = 0; i < projectImgs.length ; i++ ) {
    projectImgs[i].addEventListener('mouseover', (e)=>{
        let hero = document.querySelector('#hero img');
        hero.style.display ='block';
        hero.src= e.target.src;
        hero.classList.add('fade-in');
        /*setTimeout(()=> hero.classList.remove('fade-in'), 400);*/

        e.preventDefault();
    })
}

1 Answer

Ross King
Ross King
20,704 Points
Ross King
Ross King
20,704 Points

Hey Eslam!

Sorry for a rushed answer and it may be incorrect (about to call it a night!).

I think your code isn't working because your only setting an event listener when the image is in a hovered state. You will need to add another event listener for when the mouse leaves the element.

Can you give something like this a try:

let projectImgs = document.querySelectorAll('figure img');
for ( i = 0; i < projectImgs.length ; i++ ) {
    projectImgs[i].addEventListener('mouseenter', (e)=> {
        let hero = document.querySelector('#hero img');
        hero.style.display ='block';
        hero.src= e.target.src;
        hero.classList.add('fade-in');
        /*setTimeout(()=> hero.classList.remove('fade-in'), 400);*/

        e.preventDefault();
    });

    projectImgs[i].addEventListener('mouseleave', ()=> {
        let hero = document.querySelector('#hero img');
        hero.style.display ='none';
    });
}

Let me know how this goes, if you're still waiting on an answer tomorrow I'll get back to you!

eslam said
eslam said
Courses Plus Student 6,734 Points

ross ross thank you so much it works, i really appreciate that, god bless you