/*--鼠标选择样式文章概要向上浮动*/
.xlog-post:hover {
box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* 鼠标悬浮时盒子出现的阴影 */
transform: translate(0, -10px);/* 鼠标悬浮时盒子上移10px */
}
使用上方代码鼠标移动到 box 边缘，box 会高频跳动。
而在归档页就没问题，是因为归档页 box 间距小鼠标滑过直接到下一个盒子。
所以博主没有第一时间发现，
解决办法给上浮这个过程增加时间 。
为保证各种页面适配，不会出现同类问题，
两段代码都需要添加，下方为修改后的代码
/*--鼠标选择样式文章概要向上浮动*/
.xlog-post {
transition: all 0.3s;/* 上浮这个过程需要的时间 */
}
.xlog-post:hover {
box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* 鼠标悬浮时盒子出现的阴影 */
transform: translate(0, -10px);/* 鼠标悬浮时盒子上移10px */
}
.xlog-post {
padding: 1rem;
}
/*---鼠标选择样式归档文章列表向上浮动*/
.items-center.-mx-2 {
transition: all 0.3s;/* 上浮这个过程需要的时间 */
}
.items-center.-mx-2:hover {
box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* 鼠标悬浮时盒子出现的阴影 */
transform: translate(0, -5px);/* 鼠标悬浮时盒子上移10px */
}