Манипулировать только элементом, который мышь наводится на jQuery

Question

У меня есть функция в моем скрипте, которая предназначена для управления навигацией на странице html. Моя проблема заключается в том, что у меня есть несколько блоков кода <nav>...</nav>, и когда я использую код ниже, он затрагивает все из них.

$(function() { 
    $('nav').hover(function() { 
     $('nav').animate({ top: '-=100px' }, 1000, 'easeOutBounce', null); 
    }); 
}); 

Поэтому я принял логичное, что нужно сделать было бы указать, какой блок Nav генерировал событие парения, однако при использовании this внутри функция вызывается, когда событие было зависать на месте ничего не произошло.

$(function() { 
    $('nav').hover(function() { 
     this.animate({ top: '-=100px' }, 1000, 'easeOutBounce', null); 
    }); 
}); 

Как я в состоянии идентифицировать и манипулировать блок нав, который в настоящее время зависли над самими по себе и не влияют на все навигационные блоки сразу.

Редактировать

Например, если бы я, чтобы эти три nav блоков, и я хочу, чтобы манипулировать только функцией, если nav блок время завис над, как бы я различать между ними.

<nav id="nav1"></nav> 
<nav id="nav2"></nav> 
<nav id="nav3"></nav> 

Answer 1

Использование $(this) вместо this

$(function() { 
    $('nav').hover(function() { 
     $(this).animate({top: '-=100px' }, 1000, 'easeOutBounce', null); 
    }); 
}); 

Answer 2

$ ('nav') предоставит вам набор всех элементов навигации на странице. Поместите атрибут id на тот, который вы хотите настроить, и используйте его.

<nav id="targetNav"></nav> 

$('#targetNav').hover(...) 

Answer 3

Вам не нужно даже использовать JQuery для него. Также это не способ использовать nav.

Nav - это семантический тег HTML5. В этом нет ничего плохого в использовании, но в будущем браузер начнет правильно использовать эти теги, и это может вызвать некоторые проблемы. Подумайте о навигаторе, поскольку вы говорите в браузере «Эй, вот моя навигация»

Используйте nav подобный этому и напишите этот простой CSS-код, и он будет работать.

HTML

<nav> 
<ul> 
    <li>Element 1</li> 
    <li>Element 2</li> 
    <li>Element 3</li> 
</ul> 
</nav> 

CSS

li{ /* Write your non active element styling here */} 

li:hover{ /* Write your hovered element styling here */} 

Надежда это решает вашу проблему