How to use the onmouseover Attribute In Javascript

Using Event Listener

In this approach, we are directly adding the onmouseover attribute to an HTML element. The HTML button element utilizes the onmouseover attribute to trigger the JavaScript function greet() when the mouse hovers over it. Upon hovering, an alert message “Welcome to w3wiki!” displays the onmouseover event’s usage to call a function.

Example: The below example uses the onmouseover attribute to call a JavaScript function from an onmouseover Event

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Call Function on Mouseover</title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>w3wiki</h1>
    <h3>
          Call Function on mouseover using
          onmouseover attribute
      </h3>

    <button id="myButton" onmouseover="greet()">
          Hover over me
      </button>

    <script>
        function greet() {
            alert('Welcome to w3wiki!');
        }
    </script>
</body>

</html>

Output:

How to call a JavaScript Function from an onmouseover Event ?

The onmouseover event in JavaScript is triggered when the mouse pointer moves onto an element, such as a button, image, or text. We will see how to call JavaScript function from an onmouseover event in various ways, like using the onmouseover Attribute and Using Event Listener.

Table of Content