javascript - FullCalendar 2.3.0 更改悬停时的日期颜色

Question

我正在尝试更改鼠标悬停时的日期背景颜色。

为此目的，需要在 .fc-bg .fc-day 和 .fc-content-sculpture .fc-day-number 上捕获悬停事件。这工作正常，直到我使用 background render events作为 allDay 事件，因为此时存在类 .fc-bg-event-sculpture 的第三层，它位于其他两层之上。底层元素的事件不再触发，因为单元格是使用 colspan 渲染的，如果连续存在后台渲染事件，我无法仅突出显示一天。

是否有可能在全日历中突出显示鼠标悬停的日期？我正在使用月 View 。

<div class="fc-bg">...</div>
<div class="fc-content-skeleton">...</div>
<div class="fc-bgevent-skeleton">
    <table><tbody>
        <tr>
             <td class="fc-week-number" style="width:21px"></td>
             <td colspan="3"></td>
             <td colspan="1" class="fc-bgevent available"></td>
             <td colspan="3"></td>
        </tr>
   </tbody></table>
</div>

Answer 1

最好的选择是使用 pointer-events:none 允许悬停穿过某些容器元素，并使用 pointer-events:auto 重新启用它仍需要指针事件的子元素。

.fc-day:hover{
    background:lightblue;
}

/*Allow pointer-events through*/
.fc-slats, /*horizontals*/
.fc-content-skeleton, /*day numbers*/
.fc-bgevent-skeleton /*events container*/{
    pointer-events:none
}

/*Turn pointer events back on*/
.fc-bgevent,
.fc-event-container{
    pointer-events:auto; /*events*/
}

JSFiddle

除非这会给您带来特定的无法解决的问题，否则这是最好的方法。您可能会弄乱 z-index、透明覆盖或大量 JS，但到目前为止，此解决方案引起的麻烦最少。