jQuery | hover() with Examples
The hover() is an inbuilt method in jQuery 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.
Return Value: It returns the background color effect with the selected element.
Code #1:
<html> <head> <script </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> |
chevron_right
filter_none
Output:
Before mouse pointer is moved over the paragraph-
After mouse pointer is moved over the paragraph-
After mouse pointer is moved out from the paragraph-
Recommended Posts:
- jQuery | first() with Examples
- jQuery | on() with Examples
- jQuery | after() with Examples
- jQuery | last() with Examples
- jQuery | one() with Examples
- jQuery | eq() with Examples
- jQuery | has() with Examples
- jQuery | val() with Examples
- jQuery | load() with Examples
- jQuery | position() with Examples
- jQuery | undelegate() with Examples
- jQuery | prependTo() with Examples
- jQuery | children() with Examples
- jQuery | ready() with Examples
- jQuery | focus() with Examples
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
