Question

我试图实现这种效果：http://www.palms.com/（查看网站右侧的预订模块）。当你把光标放在div到达Arriving时，它会显示datepicker，你可以翻转它，并选择一个日期。当你从div或datepicker推出时，它的消失。这是一个问题，我无法实现。

我可以在鼠标悬停时显示datepicker，但我不能在mouseover（从datepicker）上隐藏它，当我从div推出时，datepicker消失......

我的测试代码：

<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

中查看此内容

在div mouseover上显示Jquery datepicker，在datepicker上隐藏mouseout

1 个答案: