onmouseover Event mouseover Javascript DOM Tutorial Share / Like
The mouseover event fires when the mouse pointer enters the boundaries of the target object. This is commonly used to create mouse RollOver effects in which the user's mouse hovers over an object(onmouseover) it changes appearance, then when the user's mouse leaves the object(onmouseout) it returns to its normal appearance.
Scripting mouseover events through Javascript and the DOM:
Javascript CODE EXAMPLE
<script type="text/javascript">
function addEventsToHTML(){
var div1 = document.getElementById('div1');
div1.onmouseover = doStuff;
function doStuff(){
this.style.background = "#F00";
}
}
window.onload = addEventsToHTML;
</script>
<div id="div1" style="background:#999;">Mouse over me</div>
Establishing mouseover events direct on the html elements:
Javascript CODE EXAMPLE
<script type="text/javascript">
function doStuff(target){
target.style.background = "#F00";
}
</script>
<div onmouseover="doStuff(this);" style="background:#999;">Mouse over me</div>
