在引导日期选择器中突出显示整个 <tr> 周答案

【问题标题】：Highlight entire <tr> week in bootstrap datepicker在引导日期选择器中突出显示整个 <tr> 周
【发布时间】：2012-11-01 09:22:20
【问题描述】：

类似于this post，其中提供了this jsfiddle 的答案，我想突出显示我的引导日期选择器的整个一周，而不是jQuery UI。

我的代码目前是这样的：

$('.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”不是要添加和删除的正确类。

日期选择器 CSS 文件中悬停单元格的选择器是：

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

有没有办法将“悬停”添加为“类”？

【问题讨论】：

我认为不可能通过 jQuery 添加 :hover 伪类。
请不要为了性能而使用.live()，如果没有别的。 jQuery 已弃用 .live() 函数，转而支持 $(document).on('event', 'selector', function(){ //code to run when event fires});。 .live() 选择最长和最慢的路径，这在文档很大或者元素嵌套深度时很糟糕。

标签： jquery css twitter-bootstrap datepicker hover

【解决方案1】：

您可以添加任何您想要的课程。如果您想要与显示的悬停规则相同的 css，只需为您的类添加一个新规则并使其足够具体，以使其他 css 规则不会超过它的排名。您可以检查适用于浏览器控制台中任何元素的所有规则

示例 css：

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

使用mousemove不太合适，改为mouseenter

【讨论】：

谢谢。我正在考虑这条路线，但希望有一种方法可以“伪造”添加“悬停”伪类。我已将 mousemove 更改为 mouseenter，但不完全确定我一开始为什么要这样做。

【解决方案2】：

我认为你应该使用mouseenter 而不是mousemove

【讨论】：

【解决方案3】：

如果您只想在一个日期选择器上应用星期选择器突出显示，不幸的是，它通过使用应用到项目内的所有日期选择器上这个：

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

这发生在我身上，因为我是这样做的。

脚本

$('#weeklyDatePicker').on('click', function () {

        if ($('.datepicker').hasClass('one') == false) {
            $('.datepicker').addClass('one');
        }           
    });

风格

   .one{
}



.one tr:hover{
  background-color: #a8a8a8;
}

【讨论】：