我的脚本中有一个函数,用于操纵 html 页面的导航。我的问题是我有多个 <nav>...</nav>
代码块,当我使用下面的代码时,它会影响所有代码块。
$(function () {
$('nav').hover(function () {
$('nav').animate({ top: '-=100px' }, 1000, 'easeOutBounce', null);
});
});
因此我假设合乎逻辑的做法是指定哪个导航 block 生成悬停事件,但是在使用 this
时在悬停事件发生时触发的函数内部没有任何反应。
$(function () {
$('nav').hover(function () {
this.animate({ top: '-=100px' }, 1000, 'easeOutBounce', null);
});
});
我如何才能识别和操纵自己悬停的导航 block ,而不是立即影响所有导航 block 。
编辑
例如,如果我有这三个 nav
block ,我希望它们仅在 nav
时由函数操作 block 正在悬停,我将如何区分它们。
<nav id="nav1"></nav>
<nav id="nav2"></nav>
<nav id="nav3"></nav>
最佳答案
使用$(this)
代替this
$(function () {
$('nav').hover(function () {
$(this).animate({top: '-=100px' }, 1000, 'easeOutBounce', null);
});
});
关于javascript - 只操作鼠标悬停在 jquery 上的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37515596/