When the mouse pointer hovers over an HTML element, the onmouseover event is triggered, allowing for the execution of user-defined actions. This event also activates when the mouse pointer interacts with the desired element, HTML tag, or specific data. Conversely, moving the cursor away from an element will not invoke the onmouseover event if the mouseout function is not utilized. The mouseover function operates in conjunction with the mouseout function to disable the effect. For example, a hyperlink can be emphasized using the onmouseover event, and once the mouse pointer is removed from the link, it will revert to its standard appearance.
Syntax
The subsequent syntaxes are applicable in various formats and for distinct events utilizing JavaScript.
Syntax 1: The syntax presented below utilizes HTML tags alongside a JavaScript function. This JavaScript function can operate within a script tag or within an external script file.
<html>
<body>
<p onmouseover = "handler_name()">
</p>
<script>
// defining the function of the handler name
function handler_name()
{
//user-defined function script
}
</script>
</body>
</html>
Syntax 2: The subsequent syntax relies solely on JavaScript events and their corresponding functions. We can utilize the object associated with the HTML element.
<script>
object.onmouseover = handler_name() {
//user-defined function script
};
</script>
Syntax 3: The subsequent syntax employs the addEventListener method alongside a JavaScript function.
<script>
object.addEventListener("mouseover", handler_name);
// user defined function script
function handler_name()
{
//user-defined function script
}
</script>
JavaScript Onmouseover Event Parameters
- The onmouseover event takes a single parameter. It is sufficient to provide only the name of the function, which is crucial for execution.
- Handler/Function Name: The onmouseover event operates using the name of the handler. This handler/function encompasses a custom-defined action that is triggered during the mouseover event.
The Return Value of the Onmouseover Event in JavaScript
- This event does not return any value. The Onmouseover event does not produce any output data; rather, it presents the user-defined webpage along with the functions related to validation.
- We can verify the event function utilizing the user-defined HTML functions for styling and validation.
Support browsers
The mouse event function supports many browsers. The "mouseup" function supports the following browsers.
- Crome
- Edge
- Firefox
- Opera
- Safari
Not supported Html element
The following html element not supported the mouseover event. Other use-defined and user-interactive elements are supported or operated.
- <head>
- <html>
- <br>
- <style>
- <title>
- <script>
- <head>
- <meta>
- <base>
- <iframe>
- <param>
- <bdo>
Examples
The subsequent examples illustrate a function through diverse representations and a range of events.
Example 1: The subsequent illustration demonstrates the mouse over functionality applied to the HTML element along with the event handler utilizing JavaScript. This allows us to modify the style attributes of the webpage.
<!DOCTYPE html>
<html>
<head>
<title> Mouseover function in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: gree;
}
</style>
</head>
<body>
<h2> JavaScript Mouse over Method </h2>
<p id = "datas"> </p>
<div id = "demoDIV" onmouseover = "demoDIVFunction()">
The javascript mouse over event works to place a pointer or move the pointer on the particular tag. It is a mouse event to handle functionality with the pointer.
</div>
<script>
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse Over Method activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "20px";
document.getElementById("demoDIV").style.color = "blue";
}
</script>
</body>
</html>
Output
The illustration displays the output page resulting from the triggered mouseover event.
Example 2
In the provided example, the mouseover and mouseout events are utilized with an HTML tag alongside a JavaScript function. By employing the mouseover function, we can modify the random background and font colors. Conversely, the mouseout event serves to eliminate the effects of the mouseover event and its associated function.
<!DOCTYPE html>
<html>
<head>
<title> Mouseover and mouseout events in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas{
color: blue;
}
</style>
</head>
<body>
<h2> Mouseover and mouseout events in JavaScript </h2>
<div id = "demoVal" onmouseover = "demoOverFunction()" onmouseout = "demoOutFunction()">
The javascript mouse over event works to place a pointer or move the pointer on the particular tag. It is a mouse event to handle functionality with the pointer.
</div>
<p id = "datas"> </p>
<script>
function demoOverFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseover function activates successfully!!!";
document.getElementById("demoVal").style.color = "red";
var color = "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase();
document.getElementById("demoVal").style.backgroundColor = color;
}
function demoOutFunction() {
document.getElementById("datas").innerHTML = "";
document.getElementById("demoVal").style.color = "black";
var color = "";
document.getElementById("demoVal").style.backgroundColor = color;
}
</script>
</body>
</html>
Output
The output demonstrates the operational capabilities of mouseover events on the web page.
Example 3
The mouseover events function correctly in the provided example that utilizes the addEventListener method in JavaScript. Through the mouseover event, we can modify both the random validation and the styling.
<!DOCTYPE html>
<html>
<head>
<title> Mouseover and mouseout events in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas{
color: blue;
}
</style>
</head>
<body id = "demoVal">
<h2> Mouseover evnet in JavaScript </h2>
<b> Mouseover evnet using addeventlistern in JavaScript </b>
<div>
The javascript mouse over event works to place a pointer or move the pointer on the particular tag. It is a mouse event to handle functionality with the pointer.
</div>
<p id = "datas"> </p>
<script>
var demoObj = document.getElementById("demoVal");
demoObj.onmouseover = demoOverFunction;
function demoOverFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseover function activates successfully!!!";
document.getElementById("demoVal").style.color = "white";
document.getElementById("demoVal").style.fontSize = "18px";
document.getElementById("demoVal").style.width = "440px";
document.getElementById("demoVal").style.backgroundColor = "black";
}
</script>
</body>
</html>
Output
The displayed output demonstrates the functionality of mouseover events on the webpage.
Example 4
The mouseover events are functioning correctly in the provided example that utilizes the JavaScript function. By employing the mouseover method, we can alter both the background color and the font color to random values.
<!DOCTYPE html>
<html>
<head>
<title> Mouseover and mouseout events in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas{
color: blue;
}
</style>
</head>
<body id = "demoVal">
<h2> Mouseover and mouseout evnets in JavaScript </h2>
<div>
The javascript mouse over event works to place a pointer or move the pointer on the particular tag. It is a mouse event to handle functionality with the pointer.
</div>
<p id = "datas"> </p>
<script>
var demoObj = document.getElementById("demoVal");
demoObj.addEventListener("mouseover", demoOverFunction);
function demoOverFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseover function activates successfully!!!";
document.getElementById("demoVal").style.color = "yellow";
document.getElementById("demoVal").style.fontSize = "18px";
document.getElementById("demoVal").style.backgroundColor = "navy";
}
</script>
</body>
</html>
Output
The output demonstrates the functionality of mouseover events on a website.
Example 5
In the provided example, the mouseover events are currently functioning on the HTML tag of the webpage. However, it is necessary to ensure that these events are correctly implemented on the header section's tag. This particular event operates effectively on custom-defined tags created by the user.
<!DOCTYPE html>
<html id = "demoVal">
<head>
<title> Mouseover and mouseout events in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas{
color: blue;
}
</style>
</head>
<body>
<h2> Mouseover evnets in JavaScript </h2>
<div>
The javascript mouse over event works to place a pointer or move the pointer on the particular tag. It is a mouse event to handle functionality with the pointer.
</div>
<p id = "datas"> </p>
<script>
var demoObj = document.getElementById("demoVal");
demoObj.addEventListener("mouseover", demoOverFunction);
function demoOverFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseover function activates successfully!!!";
}
</script>
</body>
</html>
Output
The output demonstrates the functionality of mouseover events on the web page.
Example 6
In the provided example, the mouseover events are currently functioning on the HTML tag of the webpage. However, it is necessary to adjust this so that it operates on the tag of the header section. We can implement the mouseover functionality using Windows.
<!DOCTYPE html>
<html>
<head>
<title> Mouseover and mouseout events in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas{
color: pink;
}
</style>
</head>
<body>
<h2> Mouseover evnets in JavaScript </h2>
<div>
The javascript mouse over event works to place a pointer or move the pointer on the particular tag. It is a mouse event to handle functionality with the pointer.
</div>
<p id = "datas"> </p>
<script>
window.addEventListener("mouseover", demoOverFunction);
function demoOverFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseover function activates successfully!!!";
}
</script>
</body>
</html>
Output
The output demonstrates the capability of mouseover events on the webpage.
Conclusion
The mouseover event is triggered following the full mouseover action on the element. It is utilized once the mouse has exited the element associated with the web page.