超赞Win10日历悬停效果，爱了爱了！

在当今信息爆炸的时代，我们经常需要在各种不同的设备上进行工作、学习和娱乐。为了有效地管理时间，一款好用的日历应用必不可少。

传统的日历应用通常只能显示当前的日期和时间，而对于复杂的任务安排和日程管理，它们往往显得力不从心。为了解决这个问题，人们开发出了各种各样的日历组件，这些组件可以帮助用户更直观、更便捷地查看和管理自己的日程安排。

在众多日历组件中，Windows 10 日历以其简约、美观的设计和强大的功能备受用户青睐。这款日历组件不仅支持基本的时间和日期显示，还提供了丰富的日程管理功能，如任务提醒、事件创建、日程共享等。

其中，Windows 10 日历中最吸引人的一个功能就是它的悬停效果。当用户将鼠标悬停在某个日期上时，该日期周围会显示一个圆形阴影，并出现一个弹出窗口，其中显示了该日期的详细内容。

这个悬停效果不仅美观，而且非常实用。它可以让用户快速地预览某个日期的安排，而无需点击进入该日期的详细页面。此外，悬停效果还可以帮助用户更轻松地选择日期。

如果您也喜欢 Windows 10 日历的悬停效果，那么您可以在自己的项目中使用它。在本文中，我将向您展示如何使用 HTML、CSS 和 Vanilla JS 创建一个类似于 Windows 10 日历的悬停效果。

HTML 结构

首先，我们先来看一下 HTML 结构。

<div class="calendar-container">
  <div class="calendar-header">
    <button class="calendar-prev-month">←</button>
    <span class="calendar-month-year"></span>
    <button class="calendar-next-month">→</button>
  </div>
  <div class="calendar-grid">
    <div class="calendar-grid-header">
      <div class="calendar-grid-day">日</div>
      <div class="calendar-grid-day">一</div>
      <div class="calendar-grid-day">二</div>
      <div class="calendar-grid-day">三</div>
      <div class="calendar-grid-day">四</div>
      <div class="calendar-grid-day">五</div>
      <div class="calendar-grid-day">六</div>
    </div>
    <div class="calendar-grid-body"></div>
  </div>
</div>

在这个 HTML 结构中，我们首先定义了一个 calendar-container 容器，它将包含整个日历组件。然后，我们在容器中定义了一个 calendar-header 头部，它将包含月份切换按钮和当前月份的显示。接下来，我们定义了一个 calendar-grid 网格，它将包含日历的日期显示区域。在网格中，我们首先定义了一个 calendar-grid-header 头部，它将包含星期几的显示。然后，我们在网格中定义了一个 calendar-grid-body 主体，它将包含所有日期的显示。

CSS 样式

接下来，我们来看一下 CSS 样式。

/* 日历容器 */
.calendar-container {
  width: 350px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

/* 日历头部 */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

/* 月份切换按钮 */
.calendar-prev-month,
.calendar-next-month {
  border: none;
  background-color: #fff;
  cursor: pointer;
}

/* 当前月份的显示 */
.calendar-month-year {
  font-size: 1.5rem;
  font-weight: bold;
}

/* 日历网格 */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

/* 星期几的显示 */
.calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #f5f5f5;
}

/* 星期几的文本 */
.calendar-grid-day {
  text-align: center;
  padding: 5px;
}

/* 日期的显示 */
.calendar-grid-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

/* 日期的文本 */
.calendar-grid-date {
  text-align: center;
  padding: 5px;
}

/* 当前日期的样式 */
.calendar-grid-date--current {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

/* 悬停时的样式 */
.calendar-grid-date:hover {
  background-color: #efefef;
  border: 1px solid #ccc;
}

在这个 CSS 样式中，我们首先定义了日历容器的样式。然后，我们定义了日历头部的样式，包括月份切换按钮和当前月份的显示样式。接下来，我们定义了日历网格的样式，包括星期几的显示样式和日期的显示样式。最后，我们定义了当前日期的样式和悬停时的样式。

JavaScript 代码

最后，我们来看一下 JavaScript 代码。

// 获取日历容器元素
const calendarContainer = document.querySelector('.calendar-container');

// 获取月份切换按钮元素
const prevMonthButton = document.querySelector('.calendar-prev-month');
const nextMonthButton = document.querySelector('.calendar-next-month');

// 获取当前月份的显示元素
const monthYearElement = document.querySelector('.calendar-month-year');

// 获取日期网格元素
const dateGridElement = document.querySelector('.calendar-grid-body');

// 创建一个新的日历对象
const calendar = new Calendar();

// 将日历对象渲染到日历容器中
calendar.render(calendarContainer);

// 为月份切换按钮添加事件监听器
prevMonthButton.addEventListener('click', () => {
  calendar.prevMonth();
});

nextMonthButton.addEventListener('click', () => {
  calendar.nextMonth();
});

// 为日期网格添加事件监听器
dateGridElement.addEventListener('click', (e) => {
  const target = e.target;
  if (target.classList.contains('calendar-grid-date')) {
    const date = target.innerText;
    alert(`您选择了 ${date} 日。`);
  }
});

在这个 JavaScript 代码中，我们首先获取了日历容器元素、月份切换按钮元素和当前月份的显示元素。然后，我们创建了一个新的日历对象，并将它渲染到日历容器中。接下来，我们为月份切换按钮添加了事件监听器，当用户点击月份切换按钮时，我们会调用日历对象的 prevMonth() 或 nextMonth() 方法来切换月份。最后，我们为日期网格添加了事件监听器，当用户点击日期时，我们会弹出