用.hover()向不同的元素添加不同的类

Question

我试图添加不同的类到不同的元素时，一个是悬停，以创建一些动画。我希望当我悬停第一个元素时，它还会添加其余的类，现在它只向第一个元素添加悬浮-1。

链接是这个和jquery代码是：

 $('.explorar-seccion:eq(0)').hover(
       function(){ $(this).addClass('hover-1') },
       function(){ $(this).removeClass('hover-1') },
       function(){ $('.explorar-seccion:eq(1)').addClass('hover-2') },
       function(){ $('.explorar-seccion:eq(1)').removeClass('hover-2') },
       function(){ $('.explorar-seccion:eq(2)').addClass('hover-3') },
       function(){ $('.explorar-seccion:eq(2)').removeClass('hover-3') },
       function(){ $('.explorar-seccion:eq(3)').addClass('hover-4') },
       function(){ $('.explorar-seccion:eq(3)').removeClass('hover-4') },
       function(){ $('.explorar-seccion:eq(4)').addClass('hover-5') },
       function(){ $('.explorar-seccion:eq(4)').removeClass('hover-5') }
    );

html是：

<a href="/que-ver.html" class="explorar-seccion">
  <!-- Some Code -->
</a>
<a href="/deporte.html" class="explorar-seccion">
  <!-- Some Code -->
</a>
<a href="/historia.html" class="explorar-seccion">
  <!-- Some Code -->
</a>
<a href="/comida.html" class="explorar-seccion">
  <!-- Some Code -->
</a>
<a href="/alojamiento.html" class="explorar-seccion">
  <!-- Some Code -->
</a>

编辑澄清了它不像预期的那样工作。

Answer 1

因此，这里的问题是，您试图为.hover()-function使用两个以上的参数。第一个参数用于mousein事件，第二个参数用于mouseout事件。

所以你的例子应该是这样的：

$('.explorar-seccion:eq(0)').hover(
   function() {
     $(this).addClass('hover-1');
     $('.explorar-seccion:eq(1)').addClass('hover-2');
     $('.explorar-seccion:eq(2)').addClass('hover-3');
     $('.explorar-seccion:eq(3)').addClass('hover-4');
     $('.explorar-seccion:eq(4)').addClass('hover-5');
   },
   function() {
     $(this).removeClass('hover-1');
     $('.explorar-seccion:eq(1)').removeClass('hover-2');
     $('.explorar-seccion:eq(2)').removeClass('hover-3');
     $('.explorar-seccion:eq(3)').removeClass('hover-4');
     $('.explorar-seccion:eq(4)').removeClass('hover-5');
   }
 );

示例

当您想独立地为每个元素应用一个类时，您可以这样做：

 $('.explorar-seccion').hover(
   function() {
     var $this = $(this),
       eq = $this.index() + 1;
     $this.addClass('hover-' + eq);
   },
   function() {
     var $this = $(this),
       eq = $this.index() + 1;
     $this.removeClass('hover-' + eq);
   }
 );

示例