When the mouse pointer exits an HTML element, the onmouseout event is triggered, allowing for user-defined actions to be executed. This functionality is associated with the specific user element, such as an HTML tag or a div, and is activated when the mouse pointer leaves that area through the event. The mouseout function collaborates with the onmouseout event to deactivate certain features. For example, a hyperlink can be emphasized using the onmouseout event, while the highlighting of the link can be removed once the mouse pointer moves away from the link.
Syntax
The subsequent syntaxes are applicable across various formats and events when utilizing JavaScript.
Syntax 1: The subsequent syntax utilizes the HTML tag along with a JavaScript function. The "onmouseout" event handler operates in conjunction with the script tag or an alternative script file.
<html>
<body>
<p onmouseout = "handler_name()">
</p>
<script>
// defining the function of the handler name
function handler_name()
{
//user-defined Js function
}
</script>
</body>
</html>
Syntax 2: The syntax provided below is applicable for the "onmouseout" event within the JavaScript tag and its associated function. We can reference the HTML element's object using either its id or class.
<script>
object.onmouseout = handler_name() {
//user-defined Js function
};
</script>
Syntax 3: The subsequent syntax demonstrates the utilization of the mouseout function in conjunction with the addEventListener event within JavaScript.
<script>
object.addEventListener("mouseout", handler_name);
// user defined function script
function handler_name()
{
//user-defined Js function
}
</script>
JavaScript Onmouseout Event Arguments
- The onmouseout event takes one argument. It is important to utilize the function's name.
- Function name: the onmouseout event operates with the name of the function. The handler or function encompasses a custom-defined action for the mouse-out event.
The Return Value of the Onmouseout Event in JavaScript
- No output is produced. The Onmouseover event does not yield any returned data. Instead, it presents a web page defined by the user, incorporating validation functions.
- We can verify the event function alongside the user-defined HTML functions related to style and validation.
Support browsers
The mouse event function supports many browsers. The "mouseout" function supports the following browsers.
- Crome
- Edge
- Firefox
- Opera
- Safari
Examples
The subsequent illustrations demonstrate the mouseout function through diverse approaches and an array of events.
Example 1
The subsequent illustration demonstrates the mouseout event utilizing the mouse-out function on the HTML element, along with the event handler.
<!DOCTYPE html>
<html>
<head>
<title> Mouseout function in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: gree;
}
</style>
</head>
<body>
<h2> JavaScript Mouse out Method </h2>
<p id = "datas"> </p>
<div id = "demoDIV" onmouseover = "demoDIVFunction()" onmouseout = "demoOutFunction()" >
The javascript mouse-out event works after removing the pointer on the particular tag. It is a mouse event to handle functionality to disable the mouseout function.
</div>
<script>
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse Out Method activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "18px";
document.getElementById("demoDIV").style.color = "red";
}
function demoOutFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse out Method activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "12px";
document.getElementById("demoDIV").style.color = "black";
}
</script>
</body>
</html>
Output
The illustration displays the output page resulting from the activated mouseout event.
Example 2
Element objects can be utilized in conjunction with mouseover and mouseout functions to modify specific information containers.
<!DOCTYPE html>
<html>
<head>
<title> Mouseout and mouseout events in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas{
color: blue;
}
</style>
</head>
<body id = "demoVal">
<h2> JavaScript Mouse out Method </h2>
<p id = "datas"> </p>
<div id = "demoDIV">
The javascript mouse-out event works after removing the pointer on the particular tag. It is a mouse event to handle functionality to disable the mouseout function.
</div>
<script>
var demoObj = document.getElementById("demoVal");
demoObj.onmouseover = demoOverFunction;
demoObj.onmouseout = demoOutFunction;
function demoOverFunction () {
document.getElementById("datas").innerHTML = "JavaScript Mouse Over Method activates successfully!!!";
document.getElementById("demoDIV").style.backgroundColor = "black";
document.getElementById("demoDIV").style.color = "white";
}
function demoOutFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse out Method activates successfully!!!";
document.getElementById("demoDIV").style.backgroundColor = "";
document.getElementById("demoDIV").style.color = "black";
}
</script>
</body>
</html>
Output
The illustration displays the output page resulting from the triggered mouseout event.
Example 3
In the provided example, the mouseout events are implemented through the addEventListener method of the JavaScript function. By utilizing the mouseout function, we can modify the background color and font color randomly, while the fundamental tag is displayed following the mouseover 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 id = "demoDIV">
<h2> Mouseout evnets in JavaScript </h2>
<div id = "demoVal">
The javascript mouse-out event works after removing the pointer on the particular tag. It is a mouse event to handle functionality to disable the mouseout function.
</div>
<p id = "datas"> </p>
<script>
var demoObj = document.getElementById("demoVal");
demoObj.addEventListener("mouseout", demoOutFunction);
demoObj.addEventListener("mouseover", demoOverFunction);
function demoOutFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseout function activates successfully!!!";
document.getElementById("demoVal").style.color = "yellow";
document.getElementById("demoVal").style.fontSize = "18px";
document.getElementById("demoVal").style.backgroundColor = "navy";
}
function demoOverFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseover function activates successfully!!!";
document.getElementById("demoVal").style.color = "black";
document.getElementById("demoVal").style.fontSize = "";
document.getElementById("demoVal").style.backgroundColor = "";
}
</script>
</body>
</html>
Output
The displayed image illustrates the output page resulting from the triggered mouseout event.
Example 4
The mouseover and mouseout events operate in a comparable manner for the windows of the HTML document as illustrated in the provided example. These events function effectively with user-defined elements as well as within window applications.
<!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 evnets with Windows 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!!!";
}
window.addEventListener("mouseout", demoOutFunction);
function demoOutFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseout function activates successfully!!!";
}
</script>
</body>
</html>
Output
The visual representation displays the output page resulting from the triggered mouseout event.
Example 5
The subsequent example demonstrates the mouseout event in the absence of the mouseover function on the HTML tag and its corresponding event handler. This functionality is activated solely when the mouse pointer hovers over the div and subsequently moves away from the tag. Upon the implementation of the mouseout function, the style remains visible continuously.
<!DOCTYPE html>
<html>
<head>
<title> Mouseout function in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
color:red;
}
#datas {
color: gree;
}
</style>
</head>
<body>
<h2> JavaScript Mouse out Method </h2>
<p id = "datas"> </p>
<div id = "demoDIV" onmouseout = "demoOutFunction()" >
The javascript mouse-out event works after removing the pointer on the particular tag. It is a mouse event to handle functionality to disable the mouseout function.
</div>
<script>
function demoOutFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse out Method activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "18px";
document.getElementById("demoDIV").style.color = "black";
}
</script>
</body>
</html>
Output
The illustration displays the output page generated by the triggered mouseout event.
Conclusion
The mousemat event serves as a valuable tool for facilitating user interactions and enabling mouse-driven features within the application. It is predominantly employed in creating visually appealing data representations and engaging interactive web pages.