How to add <li> class to active and leave it after hover using jQuery ?

Bootstrap 4 is an open-source CSS framework used for frontend development of web applications. Bootstrap along with HTML and Javascript enrich the user interface for better user experience. jQuery is a Javascript framework that is used to execute Javascript functions. jQuery has similar functionalities like javascript but the only difference is jQuery includes fewer lines of code. Using jQuery and CSS we can write a code that demonstrates the addition of active class when the cursor hovers over the list item and subsequent removal of active class as the cursor is moved out.

  • First Approach: In the first approach, we use the hover() method of jQuery. The hover() method triggers or registers both the mouseenter and mouseleave events. The hover() method takes two functions as a parameter. The first parameter is the infunction that must be triggered when the mouse enters the selected item and the second parameter is the outfunction that must be executed when the mouse leaves the selected item. The first parameter is required whereas the second parameter is optional. In this example, we specify the infunction only. If only one function is specified, it runs for both the mouseenter and mouseleave events. Also, the toggleClass() method toggles the active class i.e. adds the active class if it is not present in the <li> item else removes the active class.

    Syntax:

    hover(infunction, outfunction)

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <!-- CSS only -->
            <link rel="stylesheet"
                  href=
                  integrity=
    "sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" 
                  crossorigin="anonymous" />
            <!-- JS, Popper.js, jquery -->
            <script src=
                    integrity=
    "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
                    crossorigin="anonymous">
          </script>
            <script src=
                    integrity=
    "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" 
                    crossorigin="anonymous"></script>
            <script src=
                    integrity=
    "sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" 
                    crossorigin="anonymous"></script>
      
            <!--CSS stylesheet-->
            <style type="text/css">
                .active,
                li:hover {
                    color: red;
                }
            </style>
        </head>
        <body>
            <ul>
                <!--list items without the 
                    active class initially-->
                <li class="li">Item 1</li>
                <li class="li">Item 2</li>
                <li class="li">Item 3</li>
            </ul>
      
            <!-- javascript function to add the active
                 class to list when hovered over -->
            <script type="text/javascript">
                $(".li").hover(function () {
                    //toggleClass() switches the active class
                    $(this).toggleClass("active");
                });
            </script>
        </body>
    </html>

    chevron_right

    
    

    Output

    Explanation: The output is checked in the console in the web browser. As the cursor hovers over the list item, we see the active class added to the list item in the console. As the cursor hovers out the active class is removed from the recently hovered item and added to the next item.

  • Second Approach: In the second approach, we add the outfunction to denote an already list item. Here the active class is added on mouseenter and removed on mouseleave. As the mouseleave event is triggered the visited class is added to the recently visited list item.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <!-- CSS only -->
            <link rel="stylesheet"
                  href=
                  integrity=
    "sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" 
                  crossorigin="anonymous" />
            <!-- JS, Popper.js, jquery -->
            <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
                    integrity=
    "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
                    crossorigin="anonymous"></script>
            <script src=
                    integrity=
    "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" 
                    crossorigin="anonymous"></script>
            <script src=
                    integrity=
    "sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
                    crossorigin="anonymous"></script>
      
            <!--CSS stylesheet-->
            <style type="text/css">
                .active,
                li:hover {
                    color: red;
                }
      
                .visited {
                    color: violet;
                }
            </style>
        </head>
        <body>
            <ul>
                <!--list items without the
                    active class initially-->
                <li class="li">Item 1</li>
                <li class="li">Item 2</li>
                <li class="li">Item 3</li>
            </ul>
      
            <!-- javascript function to add the active 
                 class to list when hovered over -->
            <script type="text/javascript">
                $(".li").hover(
                    function () {
                        //toggleClass() switches the active class
                        $(this).toggleClass("active");
                    },
                    function () {
                        $(this).addClass("visited");
                    }
                );
            </script>
        </body>
    </html>

    chevron_right

    
    

    Output

    Explanation: The output is checked in the console in the web browser. As the cursor hovers over the list item, we see the active class added to the list item 2 in the console. Also the list item 1 was previously visited and hence the visited class is added to it and the color of the item turns violet as per the specifications of the visited class in the CSS stylesheet.

full-stack-img




My Personal Notes arrow_drop_up


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.