jQuery hover() Method
The jQuery hover() is an inbuilt method which is used to specify two functions to start when mouse pointer move over the selected element.
Syntax:
$(selector).hover(Function_in, Function_out);
Here selector is the selected element.
Parameter: It accepts two parameters which are specified below-
- Function_in: It specifies the function to run when the mouse-enter event occurs.
- Function_out: It is optional and specifies the function to run when the mouse-leave event occurs.
Example 1: jQuery code to show the working of hover() method.
HTML
<!DOCTYPE html> <html> <head> <script src= </script> <script> < !--jQuery code to show the working of hover() method-- > $(document).ready(function () { $("p").hover(function () { $(this).css("background-color", "green"); }, function () { $(this).css("background-color", "yellow"); }); }); </script> <style> p { width: 55%; height: 80px; padding: 20px; margin: 10px; border: 2px solid green; font-size: 50px; } </style> </head> <body> <!--move the mouse in and out over this paragraph and background color will change--> <p>GeeksforGeeks !</p> </body> </html> |
Output:
Example 2: In this example, we will change the font size by hovering the mouse in and out.
HTML
<!DOCTYPE html> <html> <head> <script src= </script> <script> < !--jQuery code to show the working of hover() method-- > $(document).ready(function () { $("p").hover(function () { $(this).animate({ fontSize: "+=14px"}); }, function () { $(this).animate({ fontSize: "-=14px"}); }); }); </script> <style> p { width: 55%; height: 80px; padding: 20px; margin: 10px; border: 2px solid black; font-size: 50px; background-color: rgb(22, 153, 22); } </style> </head> <body> <!--move the mouse in and out over this paragraph and font-size will change--> <p>GeeksforGeeks !</p> </body> </html> |
Output:
Please Login to comment...