jQuery Event hover() Method

Quiz

The jQuery event hover() method is used to bind one or two handler functions to the selected elements. The first function executes when the mouse pointer enters the element, and the second function, which is optional, executes when the mouse pointer leaves the element.

Syntax

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

$(selector).hover(functionIn, functionOut);

Parameters

This method accepts two parameters named 'functionIn' and 'functionOut', which are described below −

functionIn − It specifies the function to execute when the mouse pointer enters the element.
functionOut (optional) − It specifies the function to execute when the mouse pointer leaves the element.

Return Value

This method does not return any value, but attaches one or more function to the selected elements.

Example 1

When only the functionIn parameter is passed to this method, it executes when the mouse pointer enters the element.

The following program demonstrates the usage of the jQuery event hover() method. When we pass only one functionIn parameter to this method, it executes when the pointer enters the element, and also each time the pointer re-enters the element after leaving −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    .demo{
        background-color: green;
        color: white;
        width: 100px;
        padding: 10px;
    }
</style>
</head>
<body>
    <p>Hover on the below element to see the hover effect.</p>
    <div class="demo">TutorialsPoint</div>
    <script>
        $('div').hover(function(){
            $(this).css("background-color", "lightblue");
        });
    </script>
</body>
</html>

Output

The above program displayed a message with a green background color and white text color −

When the user hovers over the element, the background color will change −

Example 2

Working with button element.

When both the functionIn and functionOut parameters are passed to this method, it initially executes functionIn when the mouse pointer enters the element, and then it executes functionOut when the mouse pointer leaves the element −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    button{
        background-color: rgb(12, 51, 12);
        color: white;
        width: 100px;
        padding: 10px;
        cursor: pointer;
        border-radius: 10px;
        transition: 0.5s;
    }
</style>
</head>
<body>
    <p>Hover on the below element to see the hover effect.</p>
    <button>Hover me!</button>
    <script>
        $('button').hover(function(){
            $(this).css("border-radius", "0px");
            $(this).css("width", "200px");
            $(this).css("background-color", "green");
        }, function(){
            $(this).css("border-radius", "10px");
            $(this).css("width", "100px");
            $(this).css("background-color", "black");
        });
    </script>
</body>
</html>

Output

After executing the above program, it will display a button with a black background color. When the user hovers over it, the width will extend to 200px, and the background color will change to green −

When use leave the element −

Example 3

Working with input fields.

In the example below, we are using the jQuery hover() method to attach one or more functions. The first function executes when the user enters the input field, and the second function executes when the user leaves the input field −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    input{
        padding: 10px;
    }
</style>
</head>
<body>
    <input type="text" placeholder="Username">
    <input type="text" placeholder="Password">
    <script>
        $('input').hover(function(){
            $(this).css("border-radius", "0px");
            $(this).css("width", "200px");
        }, function(){
            $(this).css("border-radius", "10px");
            $(this).css("width", "100px");
        });
    </script>
</body>
</html>

Output

he above program displays two input fields −

When the user hovers over the input fields −

When the user leaves the input fields −

jquery_ref_events.htm

Print Page