本文介绍如何使用纯 JavaScript 实现首个协作卡片默认展开、其余卡片悬停时自动收起该默认项的平滑交互，解决 CSS :hover 伪类在相邻元素选择器（~）下过渡冲突导致的卡顿问题。
本文介绍如何使用纯 javascript 实现首个协作卡片默认展开、其余卡片悬停时自动收起该默认项的平滑交互，解决 css `:hover` 伪类在相邻元素选择器（`~`）下过渡冲突导致的卡顿问题。
在响应式协作模块中，常需让首个卡片（如“Participate”）默认占据更大宽度以突出主入口，同时当用户将鼠标移至其他卡片（如“Explore”或“Submit”）时，自动收缩该默认项，保持视觉焦点清晰。虽然 CSS 可通过 :hover ~ .active 实现基础逻辑，但其依赖文档流顺序与相邻兄弟选择器，一旦添加 transition 就易因状态竞争出现闪烁、跳变或过渡中断——尤其在快速移入/移出多个元素时。
推荐方案：采用语义化 class 控制 + 纯 JS 事件驱动
核心思路是：
✅ 移除对 ~ 选择器的依赖，改用 active 类统一控制展开状态；
✅ 默认为首个 .participate 元素添加 active 类；
✅ 为所有非默认卡片（.not-active）绑定 mouseover / mouseout 事件，动态增删 active 类；
✅ 所有尺寸与动画均通过 CSS 过渡定义，JS 仅负责状态切换，确保渲染性能与流畅度。
以下是完整实现：
HTML 结构（精简版）
<div class="collab-container">
<div class="collab-item participate active">
<div class="homepage-content">
<div class="homepage-title"><p>Participate in</p></div>
<div class="info-hover"><p>Default expanded content...</p></div>
</div>
</div>
<div class="collab-item explore not-active">
<div class="homepage-content">
<div class="homepage-title"><p>Explore Co-Creation</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8775" title="Java Maven Common"><img
src="https://img.php.cn/upload/skill/000/000/081/179222954019613.jpg" alt="Java Maven Common" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8775" title="Java Maven Common" class="overflowclass">Java Maven Common</a>
<p class="overflowclass">Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8775" title="Java Maven Common" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></div>
<div class="info-hover"><p>Hover-triggered content...</p></div>
</div>
</div>
<div class="collab-item submit not-active">
<div class="homepage-content">
<div class="homepage-title"><p>Become part of a global network</p></div>
<div class="info-hover"><p>Another hover panel...</p></div>
</div>
</div>
</div>
关键 CSS（含过渡支持）
.collab-item {
position: relative;
overflow: hidden;
display: inline-block;
width: 25%;
height: 419px;
background-color: #4CAF50;
margin-right: 10px;
vertical-align: top;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 更顺滑的贝塞尔曲线 */
}
/* 展开状态样式 */
.active {
width: 32%;
height: 482px;
margin-right: 1%;
}
/* 悬停增强（可选） */
.collab-item:hover:not(.active) {
transform: scale(1.02);
}
.info-hover {
position: absolute;
bottom: 0;
width: 100%;
padding: 15px;
background: rgba(0,0,0,0.8);
color: white;
display: none;
}
.collab-item:hover .info-hover,
.collab-item.active .info-hover {
display: block;
}
纯 JavaScript 控制逻辑（无框架依赖）
// 获取所有需监听的非默认卡片
const nonActiveItems = document.querySelectorAll('.collab-item.not-active');
// 为每个非默认项绑定事件
nonActiveItems.forEach(item => {
item.addEventListener('mouseenter', () => {
// 收起默认项：移除 active 类
const defaultItem = document.querySelector('.collab-item.participate');
if (defaultItem) defaultItem.classList.remove('active');
});
item.addEventListener('mouseleave', () => {
// 鼠标离开时恢复默认项（可选：若需“仅悬停时收起”，此处可省略）
// 此处保留原逻辑：离开即恢复，确保状态可预测
const defaultItem = document.querySelector('.collab-item.participate');
if (defaultItem) defaultItem.classList.add('active');
});
});
// 【进阶优化】避免 mouseleave 误触发：仅当鼠标真正移出整个容器才恢复
// 替代方案（推荐）：
const container = document.querySelector('.collab-container');
container.addEventListener('mouseleave', () => {
const defaultItem = document.querySelector('.collab-item.participate');
if (defaultItem && !defaultItem.classList.contains('active')) {
defaultItem.classList.add('active');
}
});
注意事项与最佳实践：
? 避免 mouseout → 改用 mouseleave：mouseout 会在子元素间冒泡触发，造成频繁误判；mouseleave 仅在真正离开容器边界时触发，更可靠。
? 性能考量：事件委托（如监听 .collab-container）在卡片数量多时更高效，但本例结构简单，直接绑定更直观。
? 可访问性补充：若需支持键盘导航，应额外监听 focusin/focusout 并同步处理 active 状态。
? 移动端兼容性：纯 hover 在触屏设备无效，建议后续增加点击切换逻辑（如 click 切换 active），或使用 @media (hover: hover) 媒体查询做渐进增强。
通过该方案，你既能获得 CSS 过渡带来的丝滑动画，又规避了 :hover ~ 的固有限制，代码清晰、可维护性强，且完全符合纯 JavaScript 要求。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
