<div class="container">
        <h2>onmouseout 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;
        }
        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"
        };
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.