嘿，这个问题我之前踩过坑！你原来的写法之所以只有悬停在行内事件上才触发，是因为resourceLaneDidMount里拿到的info.el其实只是资源行里的局部小容器（比如事件的占位块或者行内的内容区域），不是横跨整个时间线宽度的完整资源行DOM节点，所以只有鼠标碰到那一小块区域才会有反应。

给你两个实用的解决方案，核心都是找到「覆盖整行的完整DOM容器」来绑定事件：

方案一：在资源行挂载时定位完整行容器 #

直接在resourceLaneDidMount里，通过DOM遍历找到包含当前元素的完整资源行，再给它绑事件：

resourceLaneDidMount: (info) => {
    // 用closest找到最近的完整资源行容器，类名根据你的FullCalendar版本调整
    // 比如v5/v6里常见的类名是fc-resource-row或者fc-timeline-resource
    const fullResourceRow = info.el.closest('.fc-resource-row');
    
    if (fullResourceRow) {
        fullResourceRow.addEventListener('mouseenter', () => {
            console.log(`悬停资源行: ${info.resource.id}`);
            // 这里添加高亮逻辑，比如给行加背景色
            fullResourceRow.style.backgroundColor = '#f5f8ff';
        });
        
        fullResourceRow.addEventListener('mouseleave', () => {
            console.log(`离开资源行: ${info.resource.id}`);
            // 移除高亮样式
            fullResourceRow.style.backgroundColor = '';
        });
    }
},

为什么能行：closest方法会向上遍历DOM树，找到包裹当前info.el的最接近的完整资源行容器——这个容器是横跨整个时间线宽度、覆盖整行高度的，所以鼠标碰该行任何位置都会触发事件。

方案二：用事件委托统一处理（适合动态资源场景） #

如果你的资源是动态加载/删除的，不想给每个行单独绑事件，可以用事件委托，在日历根容器上统一监听：

// 假设你的日历挂载在id为calendar的元素上
const calendarRoot = document.getElementById('calendar');

// 监听鼠标进入
calendarRoot.addEventListener('mouseenter', (e) => {
    const targetRow = e.target.closest('.fc-resource-row');
    if (!targetRow) return;
    
    // 从行元素获取资源ID（FullCalendar通常会把资源数据存在元素的dataset里，也可以自定义）
    const resourceId = targetRow.dataset.resourceId || info.resource.id;
    console.log(`悬停资源行: ${resourceId}`);
    targetRow.style.backgroundColor = '#f5f8ff';
});

// 监听鼠标离开
calendarRoot.addEventListener('mouseleave', (e) => {
    const targetRow = e.target.closest('.fc-resource-row');
    if (targetRow) {
        targetRow.style.backgroundColor = '';
    }
});

优势：不用在每个资源行挂载时重复绑定事件，资源动态更新时也能自动生效，性能更优。

关键注意事项 #

1. 类名适配：不同版本的FullCalendar，资源行的类名可能不一样，比如v6里可能是fc-timeline-resource-row。你可以按F12打开浏览器开发者工具，直接选中资源行元素，查看它的类名，替换代码里的选择器就行。
2. 样式优化：如果用JS修改行背景色容易和FullCalendar自带样式冲突，推荐用CSS实现高亮，更优雅：

.fc-resource-row:hover {
    background-color: #f5f8ff !important;
}

这样就不用在JS里写样式逻辑，直接靠CSS的hover伪类就能实现高亮。

试试上面的方法，应该就能实现鼠标悬停整个资源行都触发事件并高亮了！