如何定位样式表行：完整日历库中的最后一个孩子

Question

我正在使用完整日历库，但我遇到的情况是名称较长的事件不适合单日字段的内容。

为了查看完整的事件名称，我解决了前六列的问题：Nie - Pt 我用 :hover 伪类更改了位置，这使得全名可见。

.fc-daygrid-event {
    &:hover {
      position: absolute;
    }
  }

但它现在正在为最后一列“Sob”工作。 对于最后一列，我想使用属性 white-space:unset。它的工作方式会有所不同，但会提供功能。 我已经尝试了 3 个想法如何指向 :last-child 元素，但它没有用。 你能建议我如何选择它吗？

import styled from '@emotion/styled';

.fc-day-grid .fc-row td:last-child {
    background-color: yellow;
    &:hover {
      white-space: unset;
    }
  }

  .fc-day .fc-day-sun .fc-day-future .fc-daygrid-day {
    background-color: yellow;
    &:last-child {
      :hover {
        white-space: unset;
      }
    }
  }

  .fc-day-grid .fc-row td:nth-of-type(7) {
    background-color: yellow;
    &:hover {
      white-space: unset;
    }
  }

或者您可以建议另一种解决方案来解决此问题？

出于造型目的，我使用情感/反应库：

 <StyledCalendar>
        <FullCalendar
          plugins={[dayGridPlugin]}
          initialView="dayGridMonth"
          buttonText={{ today: t('calendar.today') }}
          titleFormat={(date) => monthYearTitleHandler(date)}
          dayHeaderContent={({ date }) => calendarDayNameHandler(date)}
          displayEventEnd
          displayEventTime
          events={mockEvents}
          eventTimeFormat={{
            hour: '2-digit',
            minute: '2-digit',
            meridiem: false,
          }}
        />
      </StyledCalendar>

Answer 1

使用您可以使用的全日历库在悬停时显示完整的日历条目

.fc-event-title:hover {
    overflow: visible;
}

如果你想定位特定的列（例如第二列），你可以使用

.fc-day:nth-child(2) .fc-event-title:hover {
    overflow: visible;
}