jQuery Event mouseover() Method

The jQuery event mouseover() method is an event handler that triggers when the mouse pointer moves over a chosen element. It can attach a function to execute when the mouseover event occurs or trigger the mouseover event.

Syntax

Following is the syntax of the jQuery event mouseover() method −

$(selector).mouseover(function)

Parameters

This method accepts an optional parameter as a function, the same is described below −

function (optional) − An optional function to execute when the mouse-over event occurs.

Return Value

This method does not return any value instead, it binds an event handler with a mouse-over event.

Example 1

The following program demonstrates the usage of the jQuery event mouseover() method −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        width: 10%;
        padding: 10px;
        color: white;
        background-color: green;
    }
</style>
</head>
<body>
    <div>Mouse over on me!</div>
    <script>
        $('div').mouseover(function(){
            alert("Mouse pointer over the div element")
        });
    </script>
</body>
</html>

Output

The above program displays a div element, when mouse pointer over the div element, an alert pop-up message will be appear on browser screen −

When mouse pointer over the displaed element −

Example 2

Following is another example of the jQuery mouseover() method. We use this method to trigger the event whenever the mouse pointer hovers over the selected element.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    p{
        width: 200px;
        padding: 10px;
        color: white;
        background-color: green;
    }
</style>
</head>
<body>
    <h4>Moser over on the below box</h4>
    <p>Say! TutorialsPoint</p>
    <span></span>
    <script>
        $('p').mouseover(()=>{
            $('span').text($('p').text());
        });
    </script>
</body>
</html>

Output

After executing the above program, a <p> element with a green background is displayed. When the mouse pointer hovers over it, the following text will be shown −

jquery_ref_events.htm

Print Page