2

我试图达到这种效果： 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>
4

1 回答 1

2

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

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

在JSFiddle1中检查这个

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

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

You can check this in JSFiddle2

于 2013-09-25T10:23:34.660 回答