onmouseenter Event

DOM Events MouseEvent

Definition and Usage

The onmouseenter event occurs when the mouse pointer moves over an element.

Tip:This event is usually used with onmouseleave Eventused together, this event occurs when the mouse pointer moves out of the element.

Tip: The onmouseenter event is similar to onmouseover Event. The only difference is that the onmouseenter event does not bubble (it does not propagate up the document hierarchy). See more examples at the bottom of the page.

Example

Example 1

Execute JavaScript when the mouse pointer is moved over the image:

<img onmouseenter="bigImg(this)" src="smiley.gif" alt="Smiley">

Try It Yourself

Example 2

This example demonstrates the difference between onmousemove, onmouseenter, and mouseover events:

<div onmousemove="myMoveFunction()">
  <p id="demo">I will demonstrate onmousemove!</p>
</div>
<div onmouseenter="myEnterFunction()">
  <p id="demo2">I will demonstrate onmouseenter!</p>
</div>
<div onmouseover="myOverFunction()">
  <p id="demo3">I will demonstrate onmouseover!</p>
</div>

Try It Yourself

Syntax

In HTML:

<element onmouseenter="myScript">

Try It Yourself

In JavaScript:

object.onmouseenter = function(){myScript};

Try It Yourself

In JavaScript, use the addEventListener() method:

object.addEventListener("mouseenter", myScript);

Try It Yourself

Note:Internet Explorer 8 or earlier versions do not support addEventListener() Method.

Technical Details

Bubbling: Not supported
Cancelable: Not supported
Event types: MouseEvent
Supported HTML tags: All HTML elements except: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> and <title>
DOM Version: Level 2 Events

Browser Support

The numbers in the table indicate the first browser version that fully supports the event.

Events Chrome IE Firefox Safari Opera
onmouseenter 30.0 5.5 Support 6.1 11.5
DOM Events MouseEvent