mouseleave 2个元素显示/隐藏1个元素?

时间:2011-12-22 15:37:10

标签: jquery

我有2个元素<ul><div>

如果我将鼠标悬停在div上,我希望ul出现,当我鼠标移动div时,我想检查鼠标是否超过ul,如果不是,我想再次隐藏ul。

这是我在Chrome和Safari中运行的代码,但在Firefox中没有人知道可能导致此错误的原因吗?

$('.footer')
    .mouseenter(function() {
        $('ul#date').fadeIn();
    })
    .mouseleave(function(){
        $('ul#date').hover(
            function() {
                $('ul#date').mouseleave(function() {
                    $('.footer').hover(
                        function() {
                            return;
                        },
                        function() {
                            $('ul#date').fadeOut();
                        }
                    );
                });
            },
            function() {
                $('ul#date').fadeOut();
            }
        );
    });

修改 HTML标记

<div id="main-wrapper">

    <div class="clearfix" id="main">

        <div class="column" id="content">

            <div class="section">

                <h1 id="page-title" class="title">Titletest</h1>

                <div class="region region-content">

                    <div class="block" id="block-system-main">

                        <div class="content">

                            <div typeof="sioc:Item foaf:Document" class="node" id="node-13">

                                <ul id="date" style="display: none;">

                                </ul>

                            </div><!-- /.node -->

                        </div>

                    </div><!-- /.block -->

                </div><!-- /.region -->

            </div>

        </div><!-- /.section, /#content -->

    </div>

</div>

<div class="footer"></div>

好的,多亏了我,我达到了预期的效果,这是感兴趣的人的代码。

$('.footer').hover(
    function()
    { 
        $('ul#date').stop();

        if ($('ul#date:hidden'))
        { 
            $('ul#date').fadeIn();
        }

    }
);

$('ul#date').mouseleave( function(){ $('ul#date').fadeOut(); });

2 个答案:

答案 0 :(得分:1)

为什么不将ul#date括在.footer元素中,只需使用.hover()上的.footer功能来显示/隐藏<ul>

修改 添加了drupal标记。 尝试这样的事情:

$('.footer').hover(
   if ($('ul#date').is(':hidden')) {
      function(){
         $('ul#date').fadeIn();
      }
   }
);

$('ul#date').mouseleave( function(){
   $('ul#date').fadeOut();
});

答案 1 :(得分:0)

不应该是这个吗?

$('.footer').mouseenter(function(){     
    $('ul#date').fadeIn();      
}).mouseleave(function(){       
    $('ul#date').hover(function(){          
        $('ul#date').mouseleave(function(){             
            $('.footer').hover(function(){                  
                return;                 
            }, function() {                 
                $('ul#date').fadeOut();             
            });         
        }, function(){          
            $('ul#date').fadeOut();         
        }
    );
});