jquery
  1. jquery-hover
PreviousNext

JQuery hover()

The hover() function in jQuery allows you to take specific actions when the mouse cursor enters or exits an HTML element. It is an incredibly useful function for creating dynamic and interactive websites.

Syntax

Here's the syntax for using hover() in jQuery:

$(selector).hover(handlerIn, handlerOut);
  • selector: the HTML element that you want to add the hover effect on.
  • handlerIn: the function that gets executed when the mouse pointer enters the selected HTML element.
  • handlerOut: the function that gets executed when the mouse pointer leaves the selected HTML element.

Use

The hover() function is commonly used to create hover effects on links, buttons, and images. When the mouse pointer hovers over the element, the specified function is triggered.

Example

Here is an example of using hover() to create a simple hover effect on a button:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Button</title>
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        /* Add some basic styling to the button */
        button {
            padding: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<button>Hover Me</button>

<script>
    $(document).ready(function(){
        $("button").hover(
            function(){
                $(this).css("background-color", "yellow");
            },
            function(){
                $(this).css("background-color", "blue");
            }
        );
    });
</script>

</body>
</html>
Try Playground

In this example, we use hover() to create a hover effect on a button. When the mouse pointer enters the button, it changes the background color to yellow. When the mouse pointer leaves the button, it changes the background color back to blue.

Summary

The hover() function in jQuery is a powerful tool for creating interactive and engaging websites. With its simple syntax and easy-to-use functionality, it allows you to add fun and dynamic effects to your website with just a few lines of code. Use it to create hover effects on buttons, images, and links, and take your website to the next level!

mouseleave()mousedown()
Published on: