<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.