To detect if the mouse is over an element or not, you can use the mouseover and mouseleave events. The mouseover event is fired when you move the mouse pointer over an element. Whereas, the mouseleave event is fired as soon as you move the mouse pointer away from an element.
These mouse events can be added to an element using the addEventListener() method which calls a callback function whenver the specified event is fired.
Let’s say we have a div element with some id="myDiv". We want to detect if the mouse is over this div element or not.
We also have a paragraph element with an id="status" which will show the current status of the mouse pointer i.e. mouse is over or not.
<!--The target element--> <div id="myDiv">Mouse over me</div> <!--Show the current status of mouse--> <p id="status"></p>
To detect the mouseover or mouseleave events, first, you’ll need to select the element. This can be done using the getElementById() or the querySelector() method of the DOM.
After that, you can use the addEventListener() method to listen to the mouseover and mouseleave events and check if the mouse is over the element or not.
Below is the full JS code:
// Get the elements
let element = document.getElementById('myDiv');
let status = document.getElementById('status');
// Fires whenever mouse enter the element
element.addEventListener('mouseover', function(event){
// Update mouse current status
status.innerText = 'Mouse Over the Element';
});
// Fires whenever mouse leaves the element
element.addEventListener('mouseleave', function(event){
// Update mouse current status
status.innerText = 'Mouse Left';
});
After running the above code, you will get the following output:
As you can see from the above output, as soon as we move the mouse over the element, the mouseover event fires and the message ‘Mouse Over the Element’ is printed.
Similarly, when you take the mouse pointer away from the element, the mouseleave event fires and the respective message is printed.
Use the onmouseover and onmouseleave Event Handlers
You can also use the onmouseover and onmouseleave event handlers to detect if the mouse pointer is over the element or not.
These event handlers can be directly added to the HTML element as its attributes and we can specify the functions that should be called whenever these events fires.
See the following HTML code:
<!--The target element--> <div onmouseover="detectMouseOver()" onmouseleave="detectMouseLeave()">Mouse over me</div> <!--Show the current status of mouse--> <p id="status"></p>
In the above example, we have added the onmouseover and onmouseleave event handlers to the div element and specified the functions that should be called whenever these events occurs.
The detectMouseOver() function will be called as soon as you take the mouse pointer over the div. Similarly, the detectMouseLeave() function will be called whenever you take the mouse pointer away from the div.
Inside these two functions, we can put any logic to detect if the mouse is over the element or taken away from it.
// Get the element
let status = document.getElementById('status');
// Fires whenever mouse enter the element
function detectMouseOver(){
// Update mouse current status
status.innerText = 'Mouse Over the Element';
}
// Fires whenever mouse leaves the element
function detectMouseLeave(){
// Update mouse current status
status.innerText = 'Mouse Left';
}
Below is the outcome of the above code:
Conclusion
In this article, we learned how we can detect if the mouse is over an element or not using JavaScript.
To detect if the mouse is over an element or not, you can use the mouseover and mouseleave events. These events fires as soon as you take the mouse over the element and away from it respectively.
You can also add the onmouseover and onmouseleave event handlers directly to the element as its attributes and specify the functions that should be called whenever these event occurs.
Thanks for reading.
