Jquery 鼠标删除2个元素显示/隐藏1个元素？

我有两个元素a

和a

如果我将鼠标悬停在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').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();         
        }
    );
});

---

为什么不将

ul#date

括在

.footer

元素中，然后使用

.footer

上的

.hover（）

函数来显示/隐藏

编辑： 添加了drupal标签。 试着这样做：

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

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

---

你能发布你的HTML结构吗。在事件处理程序中分配了很多事件处理程序，这应该避免。我同意Rory。。。这有点像“主包装器”和“页脚”之间什么都没有（除了边距/填充）。检查我给你的答案。否，因为我希望在悬停上调用回调函数，而不是在鼠标上调用。我承认这可能是糟糕的编码和更糟糕的代码格式我尝试过这样做，但我对drupal是新手，在drupal中，页脚与实际节点分开，因此据我所知，我不能只将日期ul添加到页脚。这是一个非常好的解决方案，我只是不喜欢鼠标按以下顺序移动时引起的闪烁：footer>ul#date>footeredited:added“if（$（'ul#date'）.is（'：hidden'）{function（）{$（'ul#date'）.fadeIn（）}”现在不应该闪烁，因为它只有在完全隐藏的情况下才会在ul中消失。嘿，谢谢你的帮助，我得到了我想要的东西。我在if语句之前添加了一个stop（），因为ul#日期已经开始隐藏。非常感谢，如果你想看的话，我已经用解决方案编辑了我的原始帖子。很高兴你这么做了。尽管如此，我认为您的“if”子句输入错误（这只会让您速度变慢）——您缺少“.is（）”方法。然而，只有“.stop（）”解决了这个问题&它是有效的。您甚至可以完全删除“if”子句。根本没有意识到有一个“stop（）”方法。我也学到了一些新东西+1.

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

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