onmouseenter Event
Example
Execute a JavaScript when moving the mouse pointer onto an image:
<img onmouseenter="bigImg(this)" src="smiley.gif" alt="Smiley">
Try it Yourself »
More examples below.
Definition and Usage
The onmouseenter event occurs when the mouse pointer enters an element.
The onmouseenter event is often used together with the
onmouseleave event, which occurs when the
mouse pointer leaves an element.
The onmouseenter event is similar to the
onmouseover
event. The difference is that the onmouseenter event does not bubble
(does not propagate up the document hierarchy). See "More Examples" at the
bottom of this page to better understand the differences.
Mouse Events
| Event | Occurs When |
|---|---|
| onclick | The user clicks on an element |
| oncontextmenu | The user right-clicks on an element |
| ondblclick | The user double-clicks on an element |
| onmousedown | A mouse button is pressed over an element |
| onmouseenter | The pointer is moved onto an element |
| onmouseleave | The pointer is moved out of an element |
| onmousemove | The pointer is moving over an element |
| onmouseout | The mouse pointer moves out of an element |
| onmouseover | The mouse pointer is moved over an element |
| onmouseup | The mouse button is released over an element |
See Also:
Tutorial:
Syntax
In JavaScript, using the addEventListener() method:
object.addEventListener("mouseenter", myScript);
Try it Yourself »
Technical Details
| Bubbles: | No |
|---|---|
| Cancelable: | No |
| Event type: | 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 |
More Examples
Example
This example demonstrates the difference between the 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 »
Browser Support
onmouseenter is a DOM Level 2 (2001) feature.
It is fully supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
