The onmouseover property returns the onMouseOver event handler code on the current element.
Syntax
element.onmouseover = event handling code
Example
<!doctype html>
<html>
<head>
<title>onmouseover/onmouseout event example</title>
<script type="text/javascript">
function initElement()
{
var p = document.getElementById("foo");
p.onmouseover = showMouseOver;
p.onmouseout = showMouseOut;
};
function showMouseOver()
{
var notice = document.getElementById("notice");
notice.innerHTML = 'mouse over detected';
}
function showMouseOut()
{
var notice = document.getElementById("notice");
notice.innerHTML = 'mouse out detected';
}
</script>
<style type="text/css">
#foo {
border: solid blue 2px;
}
</style>
</head>
<body onload="initElement();">
<span id="foo">My Event Element</span>
<p>move your mouse over and out the above element.</p>
<div id="notice"></div>
</body>
</html>
Notes
The mouseover event is raised when the user moves the mouse over a particular element.
Specifications
| Specification | Status | Comment |
|---|---|---|
| WHATWG HTML Living Standard The definition of 'onmouseover' in that specification. |
Living Standard |