.hover（）を使用して異なる要素に異なるクラスを追加する

Question

いくつかのアニメーションを作成するために、異なる要素を別の要素に追加しようとしています。私は、最初の要素を動かすと、クラスの残りの部分も追加されますが、今はhover-1を最初の要素に追加するだけです。

link is thisとjQueryコードさ：HTMLはある

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

：

<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> 

EDIT 期待どおりに動作しないことを明確にします。

Answer 1

ここで問題は、.hover()関数に対して2つ以上の引数を使用しようとしていることです。最初の引数はmouseinイベントのもので、もう1つは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