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

Question

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

link is this和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() 函数使用 2 个以上的参数。第一个参数用于 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');
   }
 );

Example

---

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

 $('.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);
   }
 );

Example