All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Mouseover And Mouseout In Javascript Examples

Last Updated : Mar 11, 2024

Mouseover And Mouseout In Javascript Examples

In this tutorial we will show you the solution of mouseover and mouseout in JavaScript examples, by far the most essential occurrences are those involving the mouse.

Mouseover and mouseout are two events with very different behaviours, but two elements with nearly identical features and behaviours.

When compared to mouseover and mouseout events, consider a UI where the user wishes to click and get the view or detail of a feature.

In this case, the user will click on the menu to get the detail and view of the functionality or element, which then gets with the corresponding events.

In this tutorial, I'll teach you how to utilise JavaScript to implement mouseover and mouseout in HTML.

Step By Step Guide On Mouseover And Mouseout In Javascript Examples :-

Mouseover

<!DOCTYPE html>
<html>
<body>
<p> This program demonstrates the mouseover event on the header h2</p>
<h2 id="demo4" onmouseover="mouseOver()"> Performs the mouseover on this header.</h2>
<script>
function mouseOver() {
document.getElementById("demo4").style.color = "red";
}
</script>
</body>
</html>
  1. When the mouse cursor passes over an element, a specific event called mouseover happens. It is connected to JavaScript. Each mouseover event occurs because the relatedTarget has a particular property attached to it.
  2. The target element of the mouseout event is added to the mouseover property. The element that has left the mouse is never considered in the mouseover event; instead, only those elements that are present wherever the mouse came over are considered.
  3. Mouseover events can't take into account elements that are completely new under the pointer element, but they can take into account elements that originated from associated targets.
  4. The example shows the mouseover event as part of the mouse movement, which is mostly used for performing and managing events when the mouse is over the header.

Mouseout

<!DOCTYPE html>
<html>
<body>
<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
<script>
let test = document.getElementById("test");
// Briefly make the list red when the mouse moves off the
// <ul> element
test.addEventListener("mouseleave", function( event ) {
  // highlight the mouseleave target
  event.target.style.color = "red";
  // reset the color after a short delay
  setTimeout(function() {
    event.target.style.color = "";
  }, 1000);
}, false);
// Briefly make an <li> blue when the mouse moves off of it
test.addEventListener("mouseout", function( event ) {
  // highlight the mouseout target
  event.target.style.color = "blue";
  // reset the color after a short delay
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);
</script>
</body>
</html>
  1. When a pointing device (typically a mouse) is used to relocate the cursor so that it can no longer be included within the element or one of its descendants, the mouseout event is fired.
  2. Since the child element obscures the viewable area of the element, mouseout is also provided to it when the cursor enters it. Following is an example of mouseout.

Conclusion :-

In JavaScript, one of the most significant components is the mouseOver event, which is complementary to the mouseOut event and both are tied to mouse movement in some way.

These events are critical for UI event enhancement and mouse-related activities because they assist first-time programmers in gaining an overview of the events that require modification.

I hops this tutorial on mouseover and mouseout in javascript examples helps you.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪