Добавить различные классы в разные элементы с помощью .hover()

Я пытаюсь добавить разные классы к различным элементам, когда вы наведите курсор, чтобы создать анимацию. Я ожидаю, что когда я нахожу первый элемент, он также добавляет остальные классы, теперь он добавляет только hover-1 к первому элементу.Добавить различные классы в разные элементы с помощью .hover()

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>

EDIT Уточнить, что он не работает, как ожидалось.

источник

2016-10-12 Kevin Mamaqi

Что это и что вы ожидаете от этого? – empiric

Я ожидаю, что когда я нахожу первый элемент, он также добавляет остальные классы, прямо сейчас он добавляет hover-1 к первому элементу. –

['.hover()'] (https://api.jquery.com/hover/) не принимает более двух аргументов, первый для mousein и второй для mouseout – empiric

Итак, ваша проблема заключается в том, что вы пытаетесь использовать более двух аргументов для функции .hover(). Первый аргумент - для события 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

источник

2016-10-12 20:29:17 empiric

Добавить различные классы в разные элементы с помощью .hover()

ответ

Смежные вопросы