Mouseover function in javascript

When the mouse cursor passes on the HTML element, the onmouseover event is worked and shows user-defined functionality. This function also works when the mouse cursor selects the user element, html tag, or required data. When a user moves the cursor away from an element, the onmouseover event is activated when the mouseout function not uses. The mouseover function works with the mouseout function to deactivate the function. For instance, a link can be highlighted using an onmouseover event anytime after removing the mouse pointer link shows normal.

Syntax

The following syntaxes work in different formats with different events using javascript.

Syntax 1: the following syntax uses html tag and javascript function. The javascript function works with the script tag or a different script page.

<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 following syntax uses only javascript event and its function. We can use the object of the html element.

<script>
object.onmouseover = handler_name() {
//user-defined function script
};
</script>

Syntax 3: the following syntax uses the addEventListener event with 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 accepts one parameter. We can use only the name of the function which is essential.
Name of the handler/function: an onmouseover event works with the handler name. The handler/function contains a user-defined operation for the mouseover event.

JavaScript's Onmouseover Event Return Value

No value is returned. The Onmouseove event does not show any output data. It displays user defined web page with the functions validation.
We can confirm the event function with the user-defined html functions style and validation.

Support browsers

The mouse event function supports many browsers. The "mouseup" function supports the following browsers.

Crome
Edge
Firefox
Opera
Safari
IE

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 following examples show a function in different ways and various events.

Example 1: the following example shows the mouse over function on the html tag and handler event using javascript. We can change the style tag of the web page.

<!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 image shows the activated mouseover event output page.

Example 2

The mouseover and mouseout events work in the example using html tag and javascript function. We can change the random background and font colors using the mouseover function. The mouseout event removes the mouseover event and its 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