Jquery 日期选择器在 div 鼠标悬停时显示，在鼠标移出时隐藏

Question

我正在尝试实现这种效果:http://www.palms.com/ (查看网站右侧的预订模块)。当您将光标放在“到达”的 div 上时，它将向您显示日期选择器，您可以将鼠标悬停在其上，然后选择一个日期。当您从 div 或日期选择器推出时，它会消失。这是一个问题，我无法实现。

我可以在鼠标悬停时显示日期选择器，但我无法在鼠标悬停时隐藏它(来自日期选择器)，当我从 div 推出时，日期选择器消失...

这是我的测试代码:

<script>
    $(function() {
        $('#calendar').datepicker();
        $('#calendar').hide();
        $('#calendar').addClass('abs');

        $('#content').mouseover(function(){
            $('#calendar').fadeIn('fast');
        });

        $('#content').mouseout(function(){
            $('#calendar').fadeIn('fast');
        });
    });
</script>

...

<div id="content">
     <div class="field" id="test">
          PICKUP A DAY
     </div>
     <div id="calendar"></div>
</div>

Answer 1

如果您想在mouseout上隐藏datePicker，那么您应该使用fadeOut()，例如这个

$('#content').mouseout(function(){
            $('#calendar').fadeOut('fast');
        });

查看JSFiddle1

但我的意见是使用 .hover() 和这样的回调来获得平滑的效果

$('#content').hover(function(){
      $('#calendar').fadeIn('fast');
  }, function() {
      $('#calendar').fadeOut('fast');
});

您可以在 JSFiddle2 中查看此信息