Timeline: highlight current resource on timeline row mouse hover

Event calendars & schedulers
1

Hi,

I would like to highlight the current resource on timeline row mouse over event, like this is done with the current time step.
For example, in this instance, I would like to highlight “Kate”:
image

How can I achieve this ?

2

Hello @tanguy :wave:

It’s possible to achieve this behavior with a CSS-only solution.
Here is a quick custom CSS for this screnario:

.mbsc-timeline-column:hover:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid blue;
}
​
3

Hello,
This css will add a blue border on the time row time step.
But I want to apply a css class on the current resource
image

4

Hi @tanguy,

If you’d like to highlight the whole resource row you can try the following:

.mbsc-timeline-row:hover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  background-color: rgba(0, 0, 0, 0.05);
  z-index: 5;
  pointer-events: none;
}

Let me know if this what you need.

5

Hi,

Thanks for your answer, but that’s not what I would like.
Your css will highlight the timeline row without the resource part to the left of the row.
Me, I want highlight only the resource part when the mouse is over the corresponding timeline row (from a CSS point of view, I want to adding styles on mbsc-timeline-resource class)