如何实现容器内除首张卡片外模糊，hover时切换清晰卡片

需求 #

• 容器内所有卡片默认仅首张保持清晰，其余模糊
• 鼠标hover任意卡片时，仅当前hover的卡片清晰，其余卡片模糊

当前问题 #

现有代码实现了所有卡片默认模糊、hover时当前卡片清晰的效果，但未满足「首张卡片默认清晰」的需求。

修改后的CSS代码 #

/* 首张卡片默认清晰，覆盖通用模糊规则 */
.exp__list .exp__card:first-of-type {
    filter: blur(0);
    opacity: 1;
}

/* 所有卡片默认模糊（首张会被上面的规则覆盖） */
.exp__list .exp__card {
    filter: blur(3px);
    opacity: .99;
    transition: filter .3s, opacity .3s; /* 可选：添加过渡动画让模糊切换更平滑 */
}

/* 卡片hover时的基础样式 */
.exp__card:hover {
    background-color: #00d20013;
    border: 1px solid var(--text-primary-color); /* 修正原代码中border负数值的语法错误 */
}

/* 关键逻辑：容器hover时批量模糊所有卡片，仅当前hover卡片清晰 */
.exp__list:hover .exp__card {
    filter: blur(3px);
    opacity: .99;
}

.exp__list:hover .exp__card:hover {
    filter: blur(0);
    opacity: 1;
}

核心逻辑说明 #

1. 首张卡片默认清晰：通过:first-of-type选择器精准定位列表中的第一个卡片，强制取消其模糊效果，优先级高于通用的卡片模糊规则。
2. 容器hover时的批量控制：当鼠标进入列表容器时，先让所有卡片回到模糊状态，再单独给当前hover的卡片取消模糊，既满足了hover时的交互需求，又不破坏默认状态下首张卡片的清晰显示。
3. 额外优化：修正了原代码中border: -1px的语法错误，添加过渡动画让模糊切换更自然（可根据需求移除）。

内容的提问来源于stack exchange，提问作者Callum Luxford