You are here: Reference > JavaScript > client-side > event handling > events > onmouseover

onmouseover event | mouseover event

A A

Font size

Browser support:

Occurs when the user moves the mouse pointer into the element.

Use the onmousemove event to receive a notification when the user moves the mouse pointer over and the onmouseout event to receive a notification when the user moves the mouse pointer out of an element.

Note: the onmouseover event is not fired during a drag operation. For that case, use the ondragenter event.

How to register:

In HTML:

In JavaScript:

object.onmouseover = handler;

object.attachEvent ("onmouseover", handler);

object.addEventListener ("mouseover", handler, useCapture);

You can find the related objects in the Supported by objects section below.

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	Yes
Cancelable	Yes
Type	MouseEvent

Actions that invoke the onmouseover event:

Moving the mouse pointer into an element.

The order of events related to the onmouseover event:

Internet Explorer	Firefox, Opera, Safari
onmouseover onmouseenter onmousemove onmouseout onmouseleave	onmouseover onmousemove onmouseout

Example HTML code 1:

This example illustrates the use of the onmouseover and onmouseout events:

<head>
    <script>
        function OnMouseIn (elem) {
            elem.style.border = "2px solid blue";
        }
        function OnMouseOut (elem) {
            elem.style.border = "";
        }
    </script>
</head>
<body>
    <div style="background-color:#d0f0a0; width:200px" 
            onmouseover="OnMouseIn (this)" onmouseout="OnMouseOut (this)">
        Move your mouse pointer into and out of this element!
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the onmouseover event for a menu:

<head>
    <style>
        .normalMenu {
            background-color: #ffffff;
        }

        .activeMenu {
            background-color: #ffc19c;
        }

        .normalContent {
            display: none;
        }

        .activeContent {
            display: block;
            width: 300px;
            height: 200px;
            background-color: #ffc19c;
        }
    </style>

    <script>
        var activeMenuIdx = -1;
        function ActivateMenu (idx) {
            if (activeMenuIdx == idx) {
                return; // no need to update
            }

            var menuContainer = document.getElementById ("menuContainer");
            var contentContainer = document.getElementById ("contentContainer");

            var menus = menuContainer.getElementsByTagName ("li");
            var contents = contentContainer.getElementsByTagName ("div");

            if (activeMenuIdx >= 0) {
                menus[activeMenuIdx].className = "normalMenu";
                contents[activeMenuIdx].className = "normalContent";
            }

            activeMenuIdx = idx;

            menus[activeMenuIdx].className = "activeMenu";
            contents[activeMenuIdx].className = "activeContent";
        }

        function Init () {
            ActivateMenu (0);
        }

    </script>
</head>
<body onload="Init ()">
    <table cellpadding="0px" cellspacing="0px">
        <tr>
            <td valign="top">
                <ul id="menuContainer">
                    <li class="normalMenu" onmouseover="ActivateMenu (0)">red</li>
                    <li class="normalMenu" onmouseover="ActivateMenu (1)">blue</li>
                    <li class="normalMenu" onmouseover="ActivateMenu (2)">green</li>
                </ul>
            </td>
            <td id="contentContainer">
                <div class="normalContent" id="contentRed">The red menu is active.</div>
                <div class="normalContent" id="contentBlue">The blue menu is active.</div>
                <div class="normalContent" id="contentGreen">The green menu is active.</div>
            </td>
        </tr>
    </table>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example dumps the order of events while the mouse moves into, over and out of an element:

<head>
    <script>
        function DumpInfo (event) {
            var info = document.getElementById ("info");
            info.innerHTML += event.type + ", ";
        }
    </script>
</head>
<body>
    <div style="background-color:#d0f0a0; width:200px" 
            onmouseover="DumpInfo (event)" onmouseenter="DumpInfo (event)"
            onmousemove="DumpInfo (event)"
            onmouseout="DumpInfo (event)" onmouseleave="DumpInfo (event)">
        Move your mouse pointer into and out of this element!
    </div>
    <br /><br />
    <div id="info" style="background-color:#f0f0ff; font-weight:bold;"></div>
</body>