javascript - 鼠标悬停时隐藏的日期选择器

Question

当用户将鼠标移离日期选择器处于事件状态的输入时，我需要隐藏日期选择器。虽然它有效，但它的效果有点太好了。当我尝试将鼠标悬停在日期选择器上时，它还会隐藏日期选择器。调整 div 大小也不是最好的主意，因为这是动态生成的数据输入表单。并且仅使用 .herd-evt-date 类生成日期字段。

我需要知道如何让 jquery 检查我是否将鼠标移离文本框而不是日期选择器。如何做到这一点？

$('#herd-evt-entry-tbl').on('focus','.herd-evt-date',function() {
  $(this).datepicker({
    onSelect: function() {this.focus();},
    onClose: function() {this.focus();},
    dateFormat: 'dd-mm-yy'
  });
});
$('#herd-evt-entry-tbl').on('mouseleave','.herd-evt-date',function() {
  $(this).datepicker('hide');
});

HTML:

<div id='herd-evt-menu-div'></div>
<div id='herd-evt-detail-div'>
  <h2><div id='herd-evt-name-div'>Mating Event</div></h2>
  <button id='herd-evt-back-btn'><-Back</button>
  <button id='herd-evt-columns-btn'>Column Info</button>
  <button id='herd-evt-file-upload-btn'>Upload File</button>
  <button id='herd-evt-save-btn'>Save Valid</button>
  <input type='hidden' id='herd-load-id-hdn' value='0' />
  <input type='hidden' id='herd-evt-id-hdn' value='0' />
  <table id='herd-evt-entry-tbl' border=1></table>
</div>
<div class='herd-event-columninfo-display'>
 <div><button id='herd-event-columninfo-close-btn'>X</button></div>
 <table id='herd-evt-columninfo-tbl'></table>
 <button id='herd-evt-columninfo-upd-btn'>Update</button>
</div>
<div class='herd-evt-dup'>
  <button style='float: right; ' id='herd-evt-dup-close'>X</button>
  <table id='herd-evt-dup-tbl'>
    <thead><th></th><th>Stig</th><th>Tattoo</th><th>Ident</th><th>Herdstat</th><th>State Day</th><th>Sex</th><th>Gen Level</th><th>Transponder</th><th>French Ident</th></thead>
    <tbody></tbody>
  </table>
</div>
</div></td></tr></table>
<div style='clear: both'/>
  </div>
</div>

Answer 1

你可以这样处理:

$("#herd-evt-entry-tbl").hover(function () {
     // Do something on Mouse Over.
}, function () {
    // Do something on Mouse Off.
});

因此，如果整个 div 是元素 herd-evt-entry-tbl ，那么当 div 元素悬停在其上方或下方时将执行您的任务。它还能够将显示重新绑定(bind)到您的可见对象。您的行 $(this).datepicker('hide'); 实际上正在应用 display: none;，当您再次将鼠标悬停时可能需要修改。