Skip to content

JavaScript onmouseover Event

Why onmouseover ?

The JavaScript onmouseover feature works when moving the mouse cursor to an element or its children. Used in conjunction with the onmouseout event that occurs when a user flashes the mouse pointer out of an element.

Syntax:

HTML Attribute<element onmouseover = “handler(event)“>
Event Propertyobject.onmouseover = handler;
attachEvent Methodobject.attachEvent(“onmouseover“, handler)
addEventListener Methodobject.addEventListener(“mouseover“, handler, useCapture)

onmouseover Examples

Example 1

onmouseover example 1
<body>

    <div class="container">
        <h2>onmouseover  Event</h2>
        <div id="box" onmouseover="overFunction()" ></div>
    </div>

    <script>

        var i = 0;

        function overFunction() {
            let box = document.getElementById("box");
            var backgroundC = ["Orange", "Green", "Blue", "Red", "Black", "Brown"];
            if (i < backgroundC.length) {
                box.style.backgroundColor = backgroundC[i];
                i += 1;
            }
            else {
                i = 0;
            }
        }

    </script>
</body>

Example 2

onmouseover example 2
<body>

    <div class="container">
        <h2>onmouseover Event</h2>
        <div id="box"></div>
    </div>

    <script>

        document.getElementById("box").onmouseover = function () {
            overFunction();
        };

        var i = 0;

        function overFunction() {
            let box = document.getElementById("box");
            var backgroundC = ["Orange", "Green", "Blue", "Red", "Black", "Brown"];
            if (i < backgroundC.length) {
                box.style.backgroundColor = backgroundC[i];
                i += 1;
            }
            else {
                i = 0;
            }
        }

    </script>
</body>

Example 3

onmouseover example 3
<body>

    <div class="container">
        <h2>onmouseover Event</h2>
        <div id="box"></div>
    </div>

    <script>

        document.getElementById("box").addEventListener("mouseover", overFunction)

        var i = 0;

        function overFunction() {
            let box = document.getElementById("box");
            var backgroundC = ["Orange", "Green", "Blue", "Red", "Black", "Brown"];
            if (i < backgroundC.length) {
                box.style.backgroundColor = backgroundC[i];
                i += 1;
            }
            else {
                i = 0;
            }
        }

    </script>
</body>

Example 4

onmouseover example 4
<body>

    <div class="container">
        <h2>onmouseoutEvent</h2>
        <div id="box" ></div>
    </div>

    <script>

        let box = document.getElementById("box")
        box.addEventListener("mouseout", moveFunction);
        box.addEventListener("mouseover", overFunction);

        function moveFunction() {
            box.style.backgroundColor = "red"
        };

        function overFunction() {
            box.style.backgroundColor = "orange"
        };

    </script>
</body>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: