hover在agendaWeek + fullcalendar的一个单元格上的效果

嗨，我正在使用Adam Shaw的FullCalendar（ http://arshaw.com/fullcalendar/ ）。 我正在使用一个月和AgendaWeek视图。 当用户将鼠标hover在月视图中的日期或在AgendaWeek视图中的时间段时，我想放置hover效果。 我试着改变css如下：

.fc-widget-content:hover { background-color: red; } 

这适用于月视图。 文件附件

但是，当我只需要突出显示一个时隙时，相同的代码会在agendaWeek视图中选择整行。

下面的示例图片显示了每天下午1:00的时段，而不仅仅是在02-01星期三中鼠标光标所在的时段。

任何想法如何实现这一目标。

非常感谢。

Answer 1

你并不孤单：许多FullCalendar用户希望看到开箱即用的各个时段的突出显示。 Google Code上存在此问题 。

问题源于2009年10月，所以看起来我们不应该抱有希望，但是有几个用户提出了不同的解决方法。 其中一个在我的代码中成功运行，因此可能值得一试。

Answer 2

这不仅仅是用css实现的。 问题是通过将两个表叠加在一起来创建周网格，两个表都没有背景，因此给出了网格的印象，但不是真正的网格。 网格的纵向部分是较高的z-index，因此它总是出现在顶部，因此没有hover事件将为高度触发。 我玩弄了一些方法来诱骗用户将框视为突出显示，但是，如果没有能力知道你在网格中的垂直位置，那是不可能的。 它可能是jquery可以完成的事情，但我认为所涉及的努力是不值得的。

Answer 3

在$（’＃calendar’）之后粘贴此代码.fullCalendar（…）; 这将在表格中创建额外的TD 🙂

 $("table.fc-agenda-slots th").each(function () { $(this).width(50); }); $("table.fc-agenda-slots td.fc-widget-content").each(function () { $(this).width(($("table.fc-agenda-days thead th.fc-col0").width())); $(this).after("
"); $(this).after("
"); $(this).after("
"); $(this).after("
"); $(this).after("
"); $(this).after("
"); }); 

这是hover的样式css：

 table.fc-agenda-slots td.fc-widget-content { border-right: 1px #DDD solid; } table.fc-agenda-slots td.fc-widget-content:hover { background-color: #F1F1F1; } 

Answer 4

在日历加载后添加：

 $("table.fc-agenda-slots td.fc-widget-content div").each(function () { $(this).html("<table cellspacing=\"0\" style=\"width:100%\"><tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr></table>"); }); 

Answer 5

也许css3属性pointer-events:none可以帮助你。 你可以在这里看到一个演示： http ： //jsfiddle.net/rNWpz/

HTML

CSS

 #a { border:1px dashed red; width:100px; height:100px; } #b { border:1px dashed blue; width:100px; height:100px; position:absolute; top:0; left:0; pointer-events:none; } 

jQuery的

 $('#a').hover(function() { $(this).css('backgroundColor','red'); }, function () { $(this).css('backgroundColor','white'); } );