日期选择器隐藏在鼠标悬停位置

Datepicker hiding on mouseover

本文关键字：悬停 位置 鼠标 选择器 隐藏 日期      更新时间：2023-09-26

当用户将鼠标从日期选择器处于活动状态的输入移开时，我需要隐藏日期选择器。虽然它有效，但它的效果有点太好了。当我试图用鼠标悬停在它上面时，它还隐藏了日期选择器。调整div的大小也不是最好的主意，因为这是一个动态生成的数据输入表单。而且只有日期字段是用.hold-evt日期类生成的。

如果我正在远离文本框而不是日期选择器，我需要知道该怎么做才能让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>

您可以这样处理：

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

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

相关文章：