JavaScript onmousenter Event
onmousenter:
The JavaScript onmouseenter method works when the mouse is moved over the element.
onmousenter vs onmouseover
Secondly, both onmouseenter and onmouseover fire when the mouse enters the boundary of an element. However, onmouseenter doesn’t fire again (does not bubble) if the mouse enters a child element within this first element.
Syntax:
.onmouseenter
onmousenter Examples
Example 1
<body>
<div class="container">
<h2>onmouseover Event</h2>
<div id="box" onmouseenter="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
<body>
<div class="container">
<h2>onmouseover Event</h2>
<div id="box"></div>
</div>
<script>
document.getElementById("box").onmouseenter= 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>
Advertisements
