javascript - jquery 仅将鼠标悬停在一个 div 上，但为所有 div 定义

Question

我有两个相同类的div

<a href="/News">
     <div class="menubutton" id="btnMenu" style="width: 80px;"><img src="/images/menu/Noticies.png" class="img-circle thumbnailMidSize"><span class="titleText" id="textmenu">Noticias</span></div>
</a>
<a href="/People">
     <div class="menubutton" id="btnMenu"><img src="/images/menu/Invitados.jpg" class="img-circle thumbnailMidSize"><span class="titleText" id="textmenu">Invitados</span></div>
</a>

我添加了一个动画，但只想看到选中的 div 中的动画，而不是两个 div 中的动画

$(document).ready(function () {
    $(".menubutton").hover(function () {
        $(".menubutton").animate({ width: '310px' });

    });
    $(".menubutton").mouseleave(function () {
        $(".menubutton").animate({ width: '80px' });
    });
});

如何更改它以仅在一个 div 中看到动画？

Answer 1

您正在概括它。使用这个:

$(document).ready(function () {
    $(".menubutton").hover(function () {
        $(this).animate({ width: '310px' });

    });
    $(".menubutton").mouseleave(function () {
        $(this).animate({ width: '80px' });
    });
});

此外，还有一个严重的问题，即您对两个元素重复了 id="btnMenu"。 id 值应该始终是唯一的。