如何添加<li>类激活并在使用 jQuery 悬停后离开它？

Bootstrap 4 是一个开源 CSS 框架，用于 Web 应用程序的前端开发。 Bootstrap 连同 HTML 和 Javascript 丰富了用户界面，以获得更好的用户体验。 jQuery 是一个 Javascript 框架，用于执行 Javascript 功能。 jQuery 具有与 javascript 类似的功能，但唯一的区别是 jQuery 包含的代码行更少。使用 jQuery 和 CSS，我们可以编写一段代码来演示当光标悬停在列表项上时添加活动类，以及随后在光标移出时删除活动类。

• 第一种方法：在第一种方法中，我们使用 jQuery 的 hover() 方法。 hover() 方法触发或注册 mouseenter 和 mouseleave 事件。 hover() 方法接受两个函数作为参数。第一个参数是鼠标进入选中项时必须触发的函数，第二个参数是鼠标离开选中项时必须执行的函数。第一个参数是必需的，而第二个参数是可选的。在这个例子中，我们只指定了 infunction。如果只指定了一个函数，它会为 mouseenter 和 mouseleave 事件运行。此外，toggleClass() 方法切换活动类，即如果
• 项中不存在活动类，则添加活动类，否则删除活动类。

  句法：

  hover(infunction, outfunction)

  例子：

      
          
          
          
          
        
          
          
    
          
          
              .active,
              li:hover {
                  color: red;
              }
          
      
      
          
              
              Item 1
              Item 2
              Item 3
          
    
          
          
              $(".li").hover(function () {
                  //toggleClass() switches the active class
                  $(this).toggleClass("active");
              });
          
      

  输出
  

  

  说明：在 Web 浏览器的控制台中检查输出。当光标悬停在列表项上时，我们会在控制台中看到添加到列表项的活动类。当光标悬停时，活动类将从最近悬停的项目中删除并添加到下一个项目。

• 第二种方法：在第二种方法中，我们添加 outfunction 来表示已经列出的项目。这里活动类在 mouseenter 上添加并在 mouseleave 上删除。随着 mouseleave 事件被触发，visited 类被添加到最近访问过的列表项中。

      
          
          
          
          
          
          
    
          
          
              .active,
              li:hover {
                  color: red;
              }
    
              .visited {
                  color: violet;
              }
          
      
      
          
              
              Item 1
              Item 2
              Item 3
          
    
          
          
              $(".li").hover(
                  function () {
                      //toggleClass() switches the active class
                      $(this).toggleClass("active");
                  },
                  function () {
                      $(this).addClass("visited");
                  }
              );
          
      

  输出
  

  说明：在 Web 浏览器的控制台中检查输出。当光标悬停在列表项上时，我们会在控制台中看到添加到列表项 2 的活动类。此外，列表项 1 先前已被访问过，因此将被访问的类添加到其中，并且根据 CSS 样式表中已访问类的规范，该项目的颜色变为紫罗兰色。