Onmouseout in JavaScript

How to execute a function when user moves the mouse out from the element in JavaScript?

In case we want to execute a function when use move mouse pointer out of the element, we can follow this approach.

Enter your name:
   <input type="text" name="txtName" id="txtName" />
   <input type="button" id="btn" name="btn" value="Submit" onmouseout="ClearColor(this.id)" onmouseover="CallFunction(this.id)" />
    
    <script>
        function CallFunction(id) {
            document.getElementById(id).style.background = "#c0c0c0";
        }
        function ClearColor(id) {
            document.getElementById(id).style.background = "";
        }
    </script>

In the above code snippet, we have specified "onmouseover” and “onmouseout” both events that executes “CallFunction()” and “ClearColor()” functions respectively (specifying both events are not mandatory, you can go ahead with using any one event).

In the “ClearColor()” function that executes when user moves mouse out of the button, we have removed the color of the button so that it becomes completely white.

And when user moves the mouse on the button, “onmouseover” function executes that changes its background color to “#c0c0c0”.

OUTPUT