How to hover each cell for each day with react FullCalendar?

Question

I have a Reactjs FullCalendar and I want when, I hover the cell of the days, the background will be blue also, the time of this cell will be appeared.

I try this :

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

But, I get :

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

But, I want, to hover each cell for each day independently like this:

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

His code is:

<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';                 
}

How can I fix it ?

Answer 1

This can be achieved using Jquery and Fullcalendar like this:

$(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()
})
}
})

this will append td cells to the whole horizontal line and you can simply have the time or hover any color you wish.