What exactly are you trying to achieve?

Mouseover will trigger every time your cursor hovers over element as well as its children. On the other hand, mouseenter will trigger only when your cursor hovers over the element you assigned the event listener to. Here is a preview of difference.

When using those, you will add event listener just like with click and define a function which will be triggered on that event. Then you can change a size, grab some value, or do whatever you want.

In your case you could use mouseenter and mouseleave so you can control what happens on both. If you need click listener you could just replace mouseenter with click and that will work.

In functions you can use something like 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>`