Jquery datepicker 在 div 鼠标悬停时显示，在鼠标移出时从 datepicker 隐藏答案

【问题标题】：Jquery datepicker show on div mouseover, hide on mouseout from datepickerJquery datepicker 在 div 鼠标悬停时显示，在鼠标移出时从 datepicker 隐藏
【发布时间】：2013-09-25 10:16:52
【问题描述】：

我正在努力实现这种效果：http://www.palms.com/（查看网站右侧的预订模块）。当您将光标放在 div 以进行 ex Arriving 时，它会显示日期选择器，您可以在其上滚动并选择一个日期。当你从 div 或 datepicker 推出时，它会消失。这是个问题，我解决不了。

我可以在鼠标悬停时显示日期选择器，但我不能在鼠标悬停时隐藏它（来自日期选择器），当我从 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>

【问题讨论】：

在你的 mouseout 函数中，你告诉日历淡入，它应该是淡出。

标签： jquery date datepicker hover

【解决方案1】：

如果你想隐藏 mouseout 上的 datePicker，那么你应该像这样使用 fadeOut()

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

在JSFiddle1查看这个

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

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

你可以在JSFiddle2查看这个

【讨论】：

@MateuszKudej 很高兴为您提供帮助！