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

如果你想独立地为每个元素应用一个类，你可以使用它：

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

使用.hover（）将不同的类添加到不同的元素

1 个答案: