title: Hover state for active row in ui-datepicker
body: <p>I'm trying to add a 'current week' indicator to the jQuery UI datepicker. I have a custom event which triggers after the datepicker is shown. It half works, but there's a sort of lag when moving up and down quickly (even though the hover class is cleared).  I have no idea why the border is still applied to the <code>tr</code>s after the mouse leaves the row.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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(); 
          }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ui-datepicker-calendar &gt; tbody &gt; tr {
      border: 1px solid white;
  }
      .ui-datepicker-calendar &gt; tbody &gt; tr.week-hover {
          /*border: 1px solid #ffaf46;*/
          border: 1px solid #ffaf46;
      } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
  Date Picker on input field: &lt;input type="text" id="date1" name="date1"/&gt; &lt;br/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/Echilon/5y0wampc/" rel="nofollow noreferrer">https://jsfiddle.net/Echilon/5y0wampc/</a></p>