jQuery hover() Method

Last Updated:

jQuery hover() Method

The jQuery hover() method binds two functions in it. The first function will execute when the mouse pointer enters the specified element and the second function will execute when the mouse pointer leaves the specified element.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery hover() Method</h1> <p>Try to Hover me</p> <script> $(document).ready(function(){ $("p").hover(function(){ $(this).css("font-size","20px"); },function(){ $(this).css("font-size","16px"); }); }); </script> </body> </html>

Syntax

$(selector).hover(infunction, outfunction);

Parameter Values

Value Type Explanation
infunction Required Specifies the function to run when the mouse pointer enters the specified element.
outfunction Required Specifies the function to run when the mouse pointer leaves the specified element.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
hover()YesYesYesYesYesYesYesYesYesYesYesYesYes

Share this Page

Meet the Author