ui-datepickerのアクティブ行のホバー状態

Question

jQuery UIのdatepickerに '現在の週'インジケータを追加しようとしています。私はdatepickerが表示された後にトリガするカスタムイベントを持っています。半分は機能しますが、（ホバークラスがクリアされていても）すぐに上下に動くときに一種の遅れがあります。マウスが行を去った後に、なぜ境界がまだtrに適用されているのかわかりません。

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/

Answer 1

あなたは、この場合のJSは必要

を参照してくださいコード、ちょうどCSSを使用していない、とあなたはその問題を持っていないだろう欲しいものを達成することができますスニペット：

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/>