效果图

CSS代码：

进阶版本CSS代码：

/* 默认状态 */

.posts-item:not(article) {

    border: 1px solid transparent;

    border-radius: 8px;

    padding: 16px;

    box-sizing: border-box;

    transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;

}

/* 浅色模式悬停效果 */

.posts-item:not(article):hover {

    opacity: 1;

    z-index: 2;

    transform: translateY(-5px) scale(1.03); /* 微浮动放大 */

    border-color: #1976D2; /* 蓝色边框 */

    box-shadow: 0 0 20px rgba(52,152,219,0.5), 0 4px 20px rgba(52,152,219,0.3);

    /* 双层阴影，更立体 */

}

/* 暗黑模式悬停效果 */

.dark-theme .posts-item:not(article):hover {

    opacity: 1;

    z-index: 2;

    transform: translateY(-5px) scale(1.03);

    border-color: #1976D2;

    box-shadow: 0 0 20px rgba(52,152,219,0.7), 0 4px 20px rgba(52,152,219,0.5);

}

/* 可选，给进入和离开时的小动画（如果你要更顺滑，可以加动画keyframes） */

@keyframes hover-glow {

  0% {

    box-shadow: 0 0 0 rgba(52,152,219,0);

    transform: translateY(0) scale(1);

  }

  100% {

    box-shadow: 0 0 20px rgba(52,152,219,0.5), 0 4px 20px rgba(52,152,219,0.3);

    transform: translateY(-5px) scale(1.03);

  }

}