jquery - 如何使 jQuery 悬停和鼠标悬停在带有子元素的 div 上工作

Question

我们正在使用它来为我们的#footer 设置动画：

$('#footer')
    .hover(function(){
        if(!$(this).is(".open")) {
        $(this).animate({bottom: -25}, 500).addClass('open');
        }})
$('#footer')
    .mouseout(function(){
        if($(this).is(".open")) {
        $(this).stop().animate({bottom: -57}, 500).removeClass('open');
        }})

但是，#footer 包含一些阻止动画工作的子元素：

<div id="footer">
    <ul>
        <li><a href="#"><img src="abc" /></a><a href="#">ABC</a></li>
    </ul>
    <div id="kontaktdaten">
        <ul>
            <li>Adresse1</li>
        </ul>
    </div>
</div>

我们如何使悬停/鼠标悬停在整个#footer 上工作，无论它包含什么？

非常感谢您的帮助！

Answer 1

像这样使用悬停功能function(){},function(){}

$('#footer')
    .hover(function () {
    if (!$(this).hasClass("open")) {
        $(this).animate({
            bottom: -25
        }, 500).addClass('open');
    }
}, function () {
    if ($(this).hasClass("open")) {
        $(this).stop().animate({
            bottom: -57
        }, 500).removeClass('open');
    }
})

演示

Answer 2

您需要使用mouseleave事件而不是mouseout，hover()方法允许您注册这两个处理程序，如下所示

$('#footer').hover(function () {
    $(this).stop().animate({
        bottom: -25
    }, 500).addClass('open');
}, function () {
    $(this).stop().animate({
        bottom: -57
    }, 500).removeClass('open');
})