17370845950

在本文中，我将向您展示如何使用html、css和vanilla javascript创建一个酷炫的windows 10风格的悬停效果日历。

观察结果

1. 显然，这里采用了“网格悬停”效果，但光标周围的每个方向上都突出了多个元素的边框，即后续元素也被高亮显示。
2. 日期没有按钮悬停效果。
3. 网格悬停效果不适用于活动日期（今天的日期）元素。
4. 默认情况下，活动日期在边框和背景之间有一个间隔。如果选择其他日期，则会消除这个间隔。
5. 点击非活动日期时，只会显示一个彩色边框。
6. 活动元素的边框会被高亮显示。

让我们从网格效果的代码开始。

网格的前7个元素是星期名称和休息日期。由于日历一次显示42个日期，我在

win-grid

中添加了42个

win-btn

元素。一些日期处于非活动状态，其中之一处于活动状态，因此我相应地添加了类。

HTML代码语言：javascript代码运行次数：0运行复制```javascript