/-- 鼠標選擇樣式文章概要向上浮動/
.xlog-post {
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 */
}