Javascript 仅操纵鼠标悬停在jquery上的元素

我的脚本中有一个函数，用于操纵html页面的导航。我的问题是我有多个

…

代码块，当我使用下面的代码时，它会影响所有代码块

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

因此，我假设逻辑上要做的事情是指定哪个导航块正在生成悬停事件，但是在悬停事件发生时，在函数内部使用

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>

$（“nav”）将为您提供页面上所有nav元素的集合。将id属性放在您想要定位的对象上并使用它

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

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

$（'#targetNav'）。悬停（…）

使用

$（this）

而不是

this

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

---

您甚至不需要使用JQuery。而且那不是使用导航的方式

Nav是一个语义HTML5标记。现在这样使用并没有什么错，但将来，浏览器将开始正确地使用这些标签，这可能会导致一些问题。想象一下导航，当你告诉浏览器“嘿，这是我的导航”

像这样使用nav并编写这个简单的CSS代码，它就会工作

HTML

---

希望这能解决您的问题

非常感谢。我会在8分钟内接受它me@Dan很高兴我能帮上忙谢谢你的回答，但我正在尝试使用一个缓解功能，据我所知，你可以在CSS@Dan，实际上你可以使用“transition”在CSS中制作动画和放松，我知道，但是我使用的特定的transition在CSS中不可用

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

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

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