onmouseenterEvent

事件对象参考手册Event Object

Example

Execute JavaScript when the mouse pointer moves over an image:

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

Try it Yourself »

Click "Try it Yourself" in the more examples below to see more demos.


Definition and Usage

The onmouseenter event is triggered when the mouse pointer moves onto an element.

Tip:This event is usually used withonmouseleavethe event, which is triggered when the mouse pointer moves out of an element.

Tip:The onmouseenter event is similar toonmouseoverthe event. The only difference is that the onmouseenter event does not support bubbling.


Browser Support

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

Event
onmouseenter 30.0 5.5 Yes 6.1 11.5


Syntax

In HTML:

<element onmouseenter="myScript">Try it Yourself

In JavaScript:

object.onmouseenter=function(){myScript};Try it Yourself

In JavaScript, using the addEventListener() method:

object.addEventListener("mouseenter", myScript);Try it Yourself

Note:Internet Explorer 8 and earlier IE versions do not supportaddEventListener()the method.


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>


实例

More Examples

Example

This example demonstrates the differences 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 »


事件对象参考手册Event Object

Other Extensions