How to use .on and .hover in jQuery ?

jQuery .on() method: This method is used to attach an event listener to an element. This method is equivalent to the addEventListener in vanilla JavaScript.

Syntax:

$(element).on(event, childSelector, data, function)

Parameter

  • event: It specifies the event to attach (click, submit, etc.).
  • childSelector: It is optional parameter and it specify the specific child to which given event handler can be used.
  • data: It specifies optional data to be passed along with function.
  • function: It specifies the function to be run while the attached event triggered.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!-- Adding jQuery Library -->
    <script src=
    </script>
  
    <style>
        /* Adding basic styling */
        div {
            background-color: green;
            width: 100px;
            height: 100px;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div>Normal</div>
    <script>
        $('div').on('click', function () {
  
            // Changing the content
            $(this).html('Clicked!');
        });
    </script>
</body>
  
</html>

chevron_right


Output:



  • Before Clicking on div element:
  • After Clicking on div element:

jQuery .hover() method: This method is used to specify the styles of the element during mouseover and mouseout conditions. It takes two functions as an argument:

  • mouseoverFunction: Triggers when mouse enters the element.
  • mouseoutFunction: Triggers when mouse leaves the element.

You can specify multiple styles inside these functions.

Syntax:

$(element).hover(mouseoverFunction, mouseoutFunction)

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!-- Adding jQuery Library -->
    <script src=
    </script>
  
    <style>
        /* Adding basic styling */
        div {
            background-color: green;
            width: 100px;
            height: 100px;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div>Normal</div>
      
    <script>
        $('div').hover(function () { // mouse-in 
            $(this).css("background-color", "blue");
            $(this).html('Hovered!');
        },
            function () { // mouse-out
                $(this).css("background-color", "green");
                $(this).html('Normal');
            }
        )
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before mouse move over:
  • After mouse move over:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.