友链卡片悬停阴影

友链卡片悬停阴影

环境

2025.2.15(已解决)

自己开源的 《vuepress-theme-vdoing-one-public》网站模板。

此模板是在Young Kbt blog的开源项目《Kele-Bingtang.github.io》基础上修改为自己的风格而成，感谢大佬开源的模板&感谢原作者开源的vdoing主题。❤️❤️

版权

次配置来源于《Hyde Blog》大佬贡献的代码，十分感谢。

效果预览

配置方法

在docs\.vuepress\styles\palette.styl文件最后追加如下代码：

/* 友链卡片悬停阴影 */
.cardListContainer .card-list .card-item.row-3 {
  /* 默认状态下无阴影或设置初始样式 */
  transition: box-shadow 0.5s ease; /* 添加过渡效果，使阴影出现更平滑 */
  border-radius: 6px;
}
.cardListContainer .card-list .card-item.row-3:hover {
  box-shadow:0 0 10px rgba(240, 129, 129, 1);
}

配置完成后，再次运行测试即可。