Javascript DOM onmouseleave Event

Introduction

Execute a JavaScript when moving the mouse pointer out of an image:

The function bigImg() is triggered when the user moves the mouse pointer onto the image.

The function normalImg() is triggered when the mouse pointer is moved out of the image.

<!DOCTYPE html>
<html>
<body>
<img onmouseenter="bigImg(this)" 
     onmouseleave="normalImg(this)" 
     border="0" 
     src="image3.png" 
     alt="Smiley" 
     width="32" 
     height="32">

<script>
function bigImg(x) {//from  www.java 2 s  .c  om
  x.style.height = "64px";
  x.style.width = "64px";
}

function normalImg(x) {
  x.style.height = "32px";
  x.style.width = "32px";
}
</script>

</body>
</html>

The onmouseleave event occurs when the mouse pointer is moved out of an element.

The onmouseleave event does not bubble.

It does not propagate up the document hierarchy.

Bubbles: Cancelable: Event type: Supported HTML tags:	No No MouseEvent All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

Previous Next

Javascript DOM onmouseleave Event

Introduction

Related