Tryit Editor v3.6

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  float: left;
  padding: 30px;
  text-align: center;
  background-color: lightgray;
}

p {
  background-color: white;
}
</style>
</head>
<body>

<h3>This example demonstrates the difference between onmousemove, onmouseleave and onmouseout.</h3>

<p>The onmousemove event occurs every time the mouse pointer is moved over the div element.</p>
<p>The mouseleave event only occurs when the mouse pointer is moved out of the div element. </p>
<p>The onmouseout event occurs when the mouse pointer is moved out of the div element, and when it 
leaves its child elements (p and span).</p>

<div onmousemove="myMoveFunction()">
  <p>onmousemove: <br> <span id="demo">Mouse over and leave me!</span></p>
</div>

<div onmouseleave="myLeaveFunction()">
  <p>onmouseleave: <br> <span id="demo2">Mouse over and leave me!</span></p>
</div>

<div onmouseout="myOutFunction()">
  <p>onmouseout: <br> <span id="demo3">Mouse over and leave me!</span></p>
</div>

function myMoveFunction() {
  document.getElementById("demo").innerHTML = z+=1;
}

function myLeaveFunction() {
  document.getElementById("demo2").innerHTML = x+=1;
}

function myOutFunction() {
  document.getElementById("demo3").innerHTML = y+=1;
}
</script>

</body>

</html>

​x
 
<!DOCTYPE html><html><head><style>div {  width: 100px;  height: 100px;  border: 1px solid black;  margin: 10px;  float: left;  padding: 30px;  text-align: center;  background-color: lightgray;}​p {  background-color: white;}</style></head><body>​<h3>This example demonstrates the difference between onmousemove, onmouseleave and onmouseout.</h3>​<p>The onmousemove event occurs every time the mouse pointer is moved over the div element.</p><p>The mouseleave event only occurs when the mouse pointer is moved out of the div element. </p><p>The onmouseout event occurs when the mouse pointer is moved out of the div element, and when it leaves its child elements (p and span).</p>​<div onmousemove="myMoveFunction()">  <p>onmousemove: <br> <span id="demo">Mouse over and leave me!</span></p></div>​<div onmouseleave="myLeaveFunction()">  <p>onmouseleave: <br> <span id="demo2">Mouse over and leave me!</span></p></div>​<div onmouseout="myOutFunction()">  <p>onmouseout: <br> <span id="demo3">Mouse over and leave me!</span></p></div>​<script>var x = 0;var y = 0;

Save Your Code

Your Code Could Not be Saved

Your Code has Been Saved

Save to Google Drive

Open from Google Drive

Report a Problem: