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
To support me
To support me
I am in the process of setting up a custom code learning site. If you want to support me in this process, press the button.
$1.00
