I realise this

const souris=document.querySelector('.mouse');
    const mots=document.querySelectorAll('li');
    const pic=document.querySelector('.pic');
    console.log(pic);

    window.addEventListener("mousemove",(e)=>{
     console.log(e);
     souris.style.left=e.pageX - souris.offsetWidth/2 + "px";
     souris.style.top=e.pageY - souris.offsetHeight/2 + "px";
    })
     
     mots.forEach(element => {
       element.addEventListener("mouseenter",()=>{
        element.querySelector('.pic').classList.toggle('appear')
       })

       element.addEventListener("mouseout",()=>{
        element.querySelector('.pic').classList.toggle('appear')
      })
});


  

animation
the problem is the image who suppose appear on mouseenter don t apppear.
I don t know what is going wrong with my code .
Please can I have some idea about how to fix this ?

thanks by advance.

I need some idea to solves this problem