FullCalendar 3版本日期数字悬停效果实现方案咨询

嘿，我来帮你解决FullCalendar v3里给日期数字加悬停效果的问题！你提到的结构拆分确实是v3的典型特点——日期数字在主内容表格里，背景是单独的fc-bg表格，不过不管用纯CSS还是jQuery都能轻松实现，下面给你具体方案：

利用FullCalendar v3的DOM结构特性，每个日期的外层容器是fc-day，里面同时包含背景表格和内容表格，我们可以通过父容器的hover状态联动控制日期数字和背景样式，完全不需要JS：

基础版：仅日期数字悬停效果 #

/* 给日期数字本身添加悬停样式 */
.fc .fc-day-number:hover {
  background-color: #e3f2fd; /* 自定义悬停背景色 */
  color: #1976d2; /* 自定义悬停文字色 */
  border-radius: 50%; /* 可选：给数字加圆形背景 */
  padding: 2px 6px; /* 配合圆形调整内边距 */
  cursor: pointer; /* 鼠标变手型，增强交互感 */
}

进阶版：悬停日期数字时同步改变单元格背景 #

如果想要悬停时整个日期单元格的背景也跟着变化，可以借助父容器fc-day的hover状态联动：

/* 悬停时同步修改背景表格和日期数字样式 */
.fc .fc-day:hover .fc-bg td {
  background-color: #f5f5f5; /* 单元格背景色 */
}
.fc .fc-day:hover .fc-day-number {
  color: #d32f2f;
  font-weight: bold;
  border-radius: 50%;
  background-color: #ffebee;
  padding: 2px 6px;
}

注：给选择器加上.fc前缀是为了提升样式优先级，避免被FullCalendar自带样式覆盖。

如果需要更灵活的控制（比如仅精确悬停在日期数字上才触发效果，或悬停时显示额外信息），可以用jQuery实现：

基础实现（静态元素） #

$(document).ready(function() {
  // 监听日期数字的hover事件
  $('.fc-day-number').hover(
    // 鼠标进入时添加样式
    function() {
      const $dayContainer = $(this).closest('.fc-day');
      $dayContainer.find('.fc-bg td').addClass('fc-bg-hover');
      $(this).addClass('fc-day-number-hover');
    },
    // 鼠标离开时移除样式
    function() {
      const $dayContainer = $(this).closest('.fc-day');
      $dayContainer.find('.fc-bg td').removeClass('fc-bg-hover');
      $(this).removeClass('fc-day-number-hover');
    }
  );
});

事件委托版本（支持动态生成元素） #

因为FullCalendar切换月份时会动态生成新的日期元素，所以用事件委托能确保新元素也能触发效果：

$(document).on('mouseenter', '.fc-day-number', function() {
  const $dayContainer = $(this).closest('.fc-day');
  $dayContainer.find('.fc-bg td').addClass('fc-bg-hover');
  $(this).addClass('fc-day-number-hover');
}).on('mouseleave', '.fc-day-number', function() {
  const $dayContainer = $(this).closest('.fc-day');
  $dayContainer.find('.fc-bg td').removeClass('fc-bg-hover');
  $(this).removeClass('fc-day-number-hover');
});

配套CSS样式 #

.fc-day-number-hover {
  color: #1976d2;
  font-weight: bold;
  border-radius: 50%;
  background-color: #e3f2fd;
  padding: 2px 6px;
  cursor: pointer;
}

.fc-bg-hover {
  background-color: #f5f5f5;
}

内容的提问来源于stack exchange，提问作者RiotAct