Latest web development tutorials
 

onmouseover Event

< Event Object

Example

Execute a JavaScript when moving the mouse pointer onto an image:

<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The onmouseover event occurs when the mouse pointer is moved onto an element, or onto one of its children.

Tip: This event is often used together with the onmouseout event, which occurs when a user moves the mouse pointer out of an element.


Browser Support

Event
onmouseover Yes Yes Yes Yes Yes

Syntax

In HTML:

<element onmouseover="myScript">
Try it Yourself »

In JavaScript:

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

In JavaScript, using the addEventListener() method:

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

Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.


Technical Details

Bubbles: Yes
Cancelable: Yes
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

Examples

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 »

< Event Object