Mouseover function in javascript

17 Mar 2025 | 6 min read

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.

Syntax 2: the following syntax uses only javascript event and its function. We can use the object of the html element.

Syntax 3: the following syntax uses the addEventListener event with a javascript function.

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.

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.

Output