Javascript DOM onmouseenter Event

Introduction

Execute a JavaScript when moving the mouse pointer onto 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="Circle" 
     width="32" 
     height="32">
<script>
function bigImg(x) {/*from w w w  . j  a  v  a2 s  .  co m*/
  x.style.height = "64px";
  x.style.width = "64px";
}

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

</body>
</html>

The onmouseenter event occurs when the mouse pointer is moved onto an element.

The onmouseenter event does not bubble.

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 onmouseenter Event

Introduction

Related