¿Qué es exactamente lo que estás tratando de lograr?

Mouseover se activará cada vez que el cursor se desplace sobre el elemento, así como sobre sus elementos secundarios. Por otro lado, mouseenter se activará solo cuando el cursor se desplace sobre el elemento al que asignó el detector de eventos. Aquí hay una vista previa de la diferencia.

Cuando los use, agregará un detector de eventos al igual que con un clic y definirá una función que se activará en ese evento. Luego puede cambiar un tamaño, obtener algún valor o hacer lo que quiera.

En su caso, podría usar mouseenter y mouseleave para que pueda controlar lo que sucede en ambos. Si necesita un oyente de clics, simplemente puede reemplazar mouseenter con un click y eso funcionará.

En funciones puedes usar algo como targetImageEl.style.width = "500px" .

 let targetImageEl = document.getElementById("target-image"); targetImageEl.addEventListener("mouseenter", () => { // function that triggers when you hover over the image console.log("enter"); }); targetImageEl.addEventListener("mouseleave", () => { // function that triggers when you move cursor away from previously hovered image console.log("leave"); });

 <div class="container"> <div class="juno"> <img src="juno.jpg" width="450" height="150" alt="Roland Juno (a classic)" id="target-image"> <!--align="right"--> <p id="demo">ROLAND JUNO SYNTHESZIER</p> </div> </div>`