<div class="container">
        <h2>onmouseover  Event</h2>
        <div id="box"></div>
    </div>
        body{
            padding: 0;
            margin: 0;
            background: #333;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
        }
        .container {
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            width: 300px;
            color: #fff;
        }
        #box{
            width: 150px;
            height: 150px;
            border: 3px solid #262626;
            margin: 0 auto;
        }
        h2{
            text-align: center;
        }
        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;
            }
        }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.