JavaScript onmouseout Event Example

Updated on August 12, 2015     Kisan Patel

If we want to execute a javascript function when user move mouse pointer out of the element, we need to use javascript onmouseout event.

<!-- HTML -->
<input type="button" id="btn" name="btn" value="hover mouse on me" onmouseover="TestFunction(this.id)"  onmouseout="ClearFunction(this.id)"/>

<!-- Javascript -->
<script type="text/javascript">
function TestFunction(id) {
   document.getElementById(id).style.background = "#FFF200";
}

function ClearFunction(id) {
   document.getElementById(id).style.background = "";
}
</script>

In the above code snippet, we have specified onmouseover and onmouseout both events that executes TestFunction() and ClearFunction() functions respectively.

In the ClearFunction() function that executes when user moves mouse out of the button, we have removed the color of the button.

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

See the Pen mJgePo by Kisan (@pka246) on CodePen.