FullCalendar eventMouseEnter方法失效求助：鼠标悬停事件变色

核心原因：FullCalendar 3.x 回调参数不匹配 #

你使用的是FullCalendar 3.9.0版本，该版本的eventMouseEnter回调函数参数为(event, element, view)，而非高版本（v4+）的info对象。你代码里用info.el无法找到对应DOM元素，导致逻辑完全不生效。

次要问题：样式优先级覆盖 #

即便参数正确，直接给元素设置style也容易被FullCalendar内置CSS类的优先级覆盖，导致颜色修改不生效。

修复方案 #

1. 修正eventMouseEnter参数与逻辑 #

将回调参数改为3.x版本的正确形式，并用jQuery方法修改样式（比直接操作style更可靠）：

eventMouseEnter: function(event, element, view) {
  // 用jQuery的css方法直接修改背景色
  $(element).css('background-color', 'red');
  // 或者添加自定义类（更易维护，推荐）
  // $(element).addClass('event-hover');
},
// 可选：添加鼠标离开时恢复原样式的逻辑
eventMouseLeave: function(event, element, view) {
  $(element).css('background-color', '');
  // $(element).removeClass('event-hover');
}

2. 用CSS类实现（推荐） #

如果使用自定义类，需在页面中添加对应CSS规则，通过!important确保优先级覆盖内置样式：

.event-hover {
  background-color: red !important;
}

3. 移除重复配置 #

你代码里重复写了两次editable: true，虽然不影响功能，但建议删除其中一个，保持代码整洁。

完整修改后的关键代码片段 #

var calendar = $('#calendar').fullCalendar({
  editable: true,
  events: SITEURL + "/fullcalender",
  displayEventTime: false,
  // 删除重复的editable配置
  eventRender: function(event, element, view) {
    if (event.allDay === 'true') {
      event.allDay = true;
    } else {
      event.allDay = false;
    }
  },
  // ... 其他原有配置保持不变
  eventMouseEnter: function(event, element, view) {
    $(element).addClass('event-hover');
  },
  eventMouseLeave: function(event, element, view) {
    $(element).removeClass('event-hover');
  }
});

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