如何使用 jQuery 创建一个可以在悬停时添加/删除类的插件？

有两种方法可以创建一个插件，可以在 HTML 元素上悬停时添加和删除一个类。

先决条件： jQuery插件

方法 1：在 jQuery 中使用 this 属性 & hover() 和 toggleClass() 方法。

创建一个简单的插件$.fn.hoverClass = 函数(e) {..}并附加一个匿名函数。参数“ e ”接受一个类以在悬停时添加或删除。由于使用了this属性，此函数返回使用此插件附加到 HTML 元素的hover()方法。在这个hover()方法中定义了另一个匿名函数，它交替使用toggleClass()方法和this属性在 HTML 元素上添加和删除类，这次以 jQuery 对象的形式，这意味着我们可以绑定 jQuery 方法到那个特定的元素。如前所述，切换的类在附加到插件的方法的参数中传递。

示例：以下示例说明了使用插件添加和删除类“ on-hover ”，该类会更改背景颜色和除法元素的字体颜色。

HTML

    
    
    
    
      body {
        text-align: center;
      }
  
      h1 {
        color: green;
        font-size: 40px;
      }
  
      p,
      div {
        font-size: 30px;
        font-weight: bold;
      }
  
      div {
        display: inline-block;
        cursor: pointer;
        padding: 0.5rem;
        background-color: #222221;
        color: lightgreen;
      }
  
      .on-hover {
        background-color: green;
        color: white;
      }
    


    GeeksForGeeks
    jQuery - Add and remove a class on hover using a plugin
    Geeks
    
      (function ($) {
        $.fn.hoverClass = function (e) {
          return this.hover(function () {
            $(this).toggleClass(e);
          });
        };
      })(jQuery);
      $("div").hoverClass("on-hover");
    

输出：

方法 2：在 jQuery 中使用 this 属性和 hover()、addClass() 和 removeClass() 方法。

与以前一样创建了相同的插件$.fn.hoverClass = 函数(e) {..} ，但关键区别在于在hover()方法中定义了两个独立的匿名函数，而不是一个匿名函数。第一个匿名函数使用 jQuery 中的this object 和addClass()方法向 HTML 元素添加一个类，第二个匿名函数使用 jQuery 中的this object 和removeClass () 方法从 HTML 元素中删除一个类。这两个匿名函数耦合在一起具有与 jQuery 中的toggleClass()方法相同的效果，从而达到预期的效果。

示例：以下示例说明了如何使用插件添加和随后删除一个类“ on-hover ”，该类会更改背景颜色和除法元素的字体颜色。

HTML

    
    
    
    
      body {
        text-align: center;
      }
  
      h1 {
        color: green;
        font-size: 40px;
      }
  
      p,
      div {
        font-size: 30px;
        font-weight: bold;
      }
  
      div {
        display: inline-block;
        cursor: pointer;
        padding: 0.5rem;
        background-color: #222221;
        color: lightgreen;
      }
  
      .on-hover {
        background-color: green;
        color: white;
      }
    


    GeeksForGeeks
    jQuery - Add and remove a class on hover using a plugin
    Geeks
    
      (function ($) {
        $.fn.hoverClass = function (e) {
          return this.hover(
            function () {
              $(this).addClass(e);
            },
            function () {
              $(this).removeClass(e);
            }
          );
        };
      })(jQuery);
      $("div").hoverClass("on-hover");
    

输出：