onmouseout Event mouseout Javascript DOM Tutorial Share / Like
The mouseout event fires when the mouse pointer leaves the boundaries of the target object. This is commonly used with the onmouseover attribute to create rollover and rollout effects.
Scripting mouseout events through Javascript and the DOM:
Javascript CODE EXAMPLE
<script type="text/javascript">
function addEventsToHTML(){
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.onmouseover = rollover;
div2.onmouseover = rollover;
div1.onmouseout = rollout;
div2.onmouseout = rollout;
function rollover(){
this.style.background = "#B0D8FF";
}
function rollout(){
this.style.background = "#EBF0C8";
}
}
window.onload = addEventsToHTML;
</script>
<div id="div1" style="background:#EBF0C8;">Mouse out of me</div>
<div id="div2" style="background:#EBF0C8;">Mouse out of me</div>
Establishing mouseout events direct on the html elements:
Javascript CODE EXAMPLE
<script type="text/javascript">
function rollover(target){
target.style.background = "#B0D8FF";
}
function rollout(target){
target.style.background = "#EBF0C8";
}
</script>
<div onmouseover="rollover(this)" onmouseout="rollout(this)" style="background:#EBF0C8;">Mouse out of me</div>
<div onmouseover="rollover(this)" onmouseout="rollout(this)" style="background:#EBF0C8;">Mouse out of me</div>
