JavaScript commands usually get executed when an event happens.

At Higher level you need to use three mouse related events:

onmouseover() and onmouseout()

These events are triggered when the mouse pointer moves over an element of the page, and when it moves past that element.

The two events are usually used to together – onmouseover() to do something, then .onmouseout() to undo it.

In this example, the background colour will change as the mouse moves over and leaves the word “special”.

function highlight(x) {
    x.style.backgroundColor = "red";
}

function removehightlight(x) {
    x.style.backgroundColor = "white";
}

<p onmouseover="highlight(this)" onmouseout="removehightlight(this)">I am special.</p>

onclick()

This event is triggered when an object is clicked on.

In this example, a message box is displayed when the button is clicked.

function showCopyright() {
    alert("This page is copyright A Person 2021");
}

<button onclick="showCopyright()">Copyright</button>