Question

Similarly to this post, in which an answer provided this jsfiddle, I’d like to highlight the entire week of my bootstrap datepicker, not jQuery UI.

My code is currently this:

$('.datepicker-days tbody tr').live('mousemove', function () {
    $(this).find('td day').addClass('highlight');
});
$('.datepicker-days tbody tr').live('mouseleave', function () {
    $(this).find('td day').removeClass('highlight');
});

“Highlight” is not the right class to be adding and removing, as far as I can tell.

The selector in the datepicker CSS file for hovered cells is:

.datepicker td.day:hover { background: #eeeeee; cursor: pointer; }

Is there a way to add “hover” as a “class”?

Answer 1

You can add any class you want. If you want the same css as the hover rule shown just add a new rule for your class and make it specific enough that other css rules won’t out rank it. You can inspect all rules that apply to any element in a browser console

Example css:

 .datepicker td.highlight { background: #eeeeee; cursor: pointer; }

Using mousemove is not really appropriate, change to mouseenter