在本文中,我将向您展示如何使用html、css和vanilla javascript创建一个酷炫的windows 10风格的悬停效果日历。
观察结果
- 显然,这里采用了“网格悬停”效果,但光标周围的每个方向上都突出了多个元素的边框,即后续元素也被高亮显示。
- 日期没有按钮悬停效果。
- 网格悬停效果不适用于活动日期(今天的日期)元素。
- 默认情况下,活动日期在边框和背景之间有一个间隔。如果选择其他日期,则会消除这个间隔。
- 点击非活动日期时,只会显示一个彩色边框。
- 活动元素的边框会被高亮显示。
让我们从网格效果的代码开始。
网格的前7个元素是星期名称和休息日期。由于日历一次显示42个日期,我在
win-grid中添加了42个
win-btn元素。一些日期处于非活动状态,其中之一处于活动状态,因此我相应地添加了类。
HTML代码语言:javascript代码运行次数:0运行复制```javascript
立即学习“前端免费学习笔记(深入)”;












