reactjs - 如何通过反应 FullCalendar 悬停每天的每个单元格？

Question

我有一个Reactjs FullCalendar，我想要什么时候，我悬停在天的单元格上，背景也会是蓝色的，这个单元格的时间会出现。

我试试这个：

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

但是，我得到：

https://i.stack.imgur.com/sCKOq.gif

但是，我想像这样独立地将每个单元格悬停在每一天：

https://i.stack.imgur.com/v9FSh.gif

他的代码是：

<td onmouseover="highlightBG(this);" onmouseout="nohighlightBG(this);" style="color: transparent; height: 1.5em; text-align: right; padding-right: 2px; background-color: initial;"><span style="font-weight:900;">8:35</span></td>

function highlightBG(element) {                   
        element.style.backgroundColor = '#39b6f0';                   
        element.style.color = 'black';                 
}                  
function nohighlightBG(element) {                   
        element.style.backgroundColor = 'initial'; 
        element.style.color = 'transparent';                 
}

我该如何解决？

Answer 1

这可以使用Jquery和Fullcalendar这样来实现：

$(this).children("td").each(function () {
    $(this).hover(function () {
        $(this).html('<div class="current-time">' + $(this).parent().parent().data("time").substring(0, 5) + "</div>")
    }, function () {
        $(this).html("")
    })
})
}
},
function () {
    $(this).children(".temp-cell").remove()
}): $(".fc-widget-content:not(.fc-axis)").hover(function () {
$(this).html() || ($(this).append('<td class="temp-cell" style="border: 0px; width:' + (Number($(".fc-day").width()) + 3) + 'px"></td>'), $(this).children("td").each(function () {
    $(this).hover(function () {
        $(this).html('<div class="current-time">' + $(this).parent().parent().data("time").substring(0, 5) + "</div>")
    }, function () {
        $(this).html("")
    })
}))
}, function () {
$(this).children(".temp-cell").remove()
})
}
})

这会将单元格附加td到整个水平线上，您可以简单地获得时间或将鼠标悬停在您想要的任何颜色上。