ui-datepicker 中活动行的悬停状态答案

【问题标题】：Hover state for active row in ui-datepickerui-datepicker 中活动行的悬停状态
【发布时间】：2017-06-08 10:36:47
【问题描述】：

我正在尝试将“当前周”指示器添加到 jQuery UI 日期选择器。我有一个自定义事件，它在显示日期选择器后触发。它工作了一半，但是在快速上下移动时会有一种滞后（即使悬停类已被清除）。我不知道为什么在鼠标离开行后边框仍然应用于trs。

function addCalendarHover(){
    $('.ui-datepicker-calendar').on('mousemove', 'tr', function () {
        $(this)
            .addClass('week-hover')
            .find('td a').addClass('ui-state-hover');
    });
    $('.ui-datepicker-calendar').on('mouseleave', 'tr', function () {
        $(this)
            .removeClass('week-hover')
            .find('td a').removeClass('ui-state-hover');
    });
}
// add 'afterShow' event for jQUI date picker
$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
    $.datepicker._updateDatepicker = function(inst) {
        $.datepicker._updateDatepicker_original(inst);
        var afterShow = this._get(inst, 'afterShow');
        if (afterShow)
            afterShow.apply((inst.input ? inst.input[0] : null));  // trigger custom callback
}
$('#date1').datepicker({
    changeMonth: true,
    changeYear: true,
        afterShow: function(date) {
            addCalendarHover(); 
        }
});

.ui-datepicker-calendar > tbody > tr {
    border: 1px solid white;
}
    .ui-datepicker-calendar > tbody > tr.week-hover {
        /*border: 1px solid #ffaf46;*/
        border: 1px solid #ffaf46;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Date Picker on input field: <input type="text" id="date1" name="date1"/> <br/>

https://jsfiddle.net/Echilon/5y0wampc/

【问题讨论】：

嗨，兄弟。我无法在您的代码 sn-p 上重现该错误 :'( 您使用哪个浏览器？
奇怪，在悬停时添加 1.1px 边框解决了我的问题
如果您在几周内快速上下移动鼠标，则悬停状态会出现滞后边框。它在 JSFiddle 上比使用内置的 StackOverflow 编辑器更明显，但仍然存在。
@DavorMlinaric：1.1px 的边框确实解决了这个问题，但使用 px 的分数作为边框似乎很糟糕。错误？
这不是一个解决方案，但它可以为某人提供线索，而且边框闪烁的频率与日历字段中闪烁的文本光标的频率相同也很奇怪。

标签： jquery css jquery-ui jquery-ui-datepicker

【解决方案1】：

只用css就可以实现你想要的，而且你不会有这个问题，这种情况下不需要js

查看代码 sn-p：

function addCalendarHover() {
  /* $('.ui-datepicker-calendar').on('mousemove', 'tr', function () {
        $(this)
            .addClass('week-hover')
            .find('td a').addClass('ui-state-hover');
    });
    $('.ui-datepicker-calendar').on('mouseleave', 'tr', function () {
        $(this)
            .removeClass('week-hover')
            .find('td a').removeClass('ui-state-hover');
    });*/
}
// add 'afterShow' event for jQUI date picker
$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
  $.datepicker._updateDatepicker_original(inst);
  var afterShow = this._get(inst, 'afterShow');
  if (afterShow)
    afterShow.apply((inst.input ? inst.input[0] : null)); // trigger custom callback
}
$('#date1').datepicker({
  changeMonth: true,
  changeYear: true,
  afterShow: function(date) {
    addCalendarHover();
  }
});

.ui-datepicker-calendar>tbody>tr {
  border: 1px solid white;
}

.ui-datepicker-calendar>tbody>tr:hover td a:not(.ui-state-highlight) {
  
  font-weight: normal;
  color: #555555;
  border: 1px solid #999999;
}

.ui-datepicker-calendar>tbody>tr:hover td {
  border-top: 1px solid #ffaf46;
  border-bottom: 1px solid #ffaf46;
}

.ui-datepicker-calendar>tbody>tr:hover td:first-child {
  border-left: 1px solid #ffaf46;
}

.ui-datepicker-calendar>tbody>tr:hover td:last-child {
  border-right: 1px solid #ffaf46;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Date Picker on input field: <input type="text" id="date1" name="date1" /> <br/>

【讨论】：

谢谢。纯 CSS 似乎比 hacky 小数边距更可取。