jquery - 鼠标悬停时向上滑动 div，鼠标移出时隐藏，但有一些规则

Question

我有 1 个名为 #init_ind 的 div 和另一个名为 #footer_init_ind 的 div。 #footer_init_ind 的 css 代码标记可见:无； 我有一个叫做 showfooter 的功能:

    function showfoot( itemImg ) {

        if ($(itemImg).is(":hidden")) {
            $(itemImg).slideDown("slow");
        } else {
            $(itemImg).hide();
        }
};

当鼠标进入或离开时，我还有一些幻灯片#footer_init_ind 的事件。

$('#init_ind').mouseenter(function(){
        showfoot('#pie_init_ind');
});

$('#init_ind').mouseleave(function(){
        $('#pie_init_ind').css("height","17px");
        $('#pie_init_ind').hide();
    });

$('#pie_init_ind').mouseenter(function(){
        $('.pie_init_txt').css("cursor", "default");
        $('#pie_init_ind').css("height","50px");
    });
    $('#pie_init_ind').mouseleave(function(){
        $('.pie_init_txt').css("cursor", "default");
        $('#pie_init_ind').css("height","17px");
        $('#pie_init_ind').hide();
    });

我的问题是，当鼠标进入#pie_init_ind 并将其留在#init_ind 中再次进入时，#pie_init_ind 不会按照我的意愿将其大小减小到 17px。但是当鼠标离开#pie_init_ind 进入#init_ind 之外的另一个div 时它会起作用。

请问我该怎么做？？？？ 谢谢

Answer 1

很难确定，因为我看不到定义这些 div 的 HTML，但如果您的某些 div 是嵌套的，您就会看到您描述的问题。例如……

<div a>
    <div b></div>
</div>
<div c></div>

如果悬停在 div b 上应该增加 div c 的高度但是悬停在 div a 上应该减少 div c 的高度 - 默认情况下悬停在 b 上会触发 a 和 b 的两个事件(即减少和增加 div 的大小c).

如果您提供指向相关页面的链接，我会查看标记。有时这些问题只需要一双新的眼睛。