鼠标悬停时滑动div并在mouseout时隐藏,但有一些规则

时间:2011-12-31 16:02:49

标签: jquery css mouseevent

我有一个名为#init_ind的div和另一个名为#footer_init_ind的div。 #footer_init_ind的css代码标记为visible:none; 我有一个名为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时它会起作用。

我该怎么办这个???? 致谢

1 个答案:

答案 0 :(得分:0)

很难确定,因为我无法看到定义这些div的HTML,但如果你的某些div被嵌套,你会看到你描述的问题。例如......

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

如果将鼠标悬停在div b上会增加div c的高度但是将鼠标悬停在div上会降低div c的高度 - 默认情况下,将鼠标悬停在b上会触发a和b的两个事件(即减小并增加div的大小) C)。

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