默认展开指定元素，hover其他元素时收起的纯JS实现咨询

需求回顾 #

• 指定元素（.active-collab）默认处于展开状态（宽40%、高482px）
• 鼠标悬停其他.collab-item（participate/explore）时，展开元素收起恢复小尺寸；鼠标离开后重新展开
• 解决纯CSS方案过渡不流畅、hover存在bug的问题

优化后的代码实现 #

HTML结构（简化冗余元素）

<div class="collab-container">
  <div class="collab-item participate">
    <div class="homepage-content">
      <div class="homepage-title">
        <p>Participate in<br /></p>
      </div>
      <div class="info-hover">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
      </div>
    </div>
  </div>
  <div class="collab-item explore">
    <div class="homepage-content">
      <div class="homepage-title">
        <p>Explore<br />Co-Creation and<br />Talent Programs</p>
      </div>
      <div class="info-hover">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
      </div>
    </div>
  </div>
  <div class="collab-item active-collab">
    <div class="homepage-content">
      <div class="homepage-title">
        <p>Become part of a<br />global network</p>
      </div>
      <div class="active-collab-text">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
      </div>
    </div>
  </div>
</div>

CSS样式（优化过渡流畅度）

仅对需要变化的属性添加过渡，避免全属性过渡导致的性能问题，新增收起状态的类定义：

/* Allgemeine Styles */
.header-font{font-size:32px!important;}

/*Collaborate Styles*/
.collab-item {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 25%;
  height: 419px;
  /* 仅过渡必要属性，提升流畅度 */
  transition: width 0.4s ease, height 0.4s ease, margin-right 0.4s ease;
  background-color: green;
  margin-right: 10px;
  vertical-align: top;
}

.collab-item:hover {
  width: 40%;
  height: 482px;
  margin-right: 1%;
}

.collab-item:hover .info-hover {
  display: inline-block;
}

.collab-container {
  color: black!important;
}

.homepage-content {
  text-align: left; 
  padding: 10px;
}

.homepage-title {
  font-size: 28px; 
  font-weight: bold; 
}

.homepage-title p {
  line-height: 110%!important;
  color: black!important;
}

.info-hover {
  position: absolute;
  bottom: 0; 
  width: 100%; 
  padding: 15px; 
  display: none;
}

.info-hover p {
  color: black!important;
}

.participate {
  background-color: red;
}

.explore {
  background-color: green;
}

/* 默认展开状态 */
.active-collab {
  width: 40%;
  height: 482px;
  margin-right: 1%;
}

.active-collab-text {
  position: absolute;
  bottom: 0; 
  width: 100%; 
  padding: 15px; 
}

.active-collab-text p {
  color: black!important;
}

/* 收起状态 */
.active-collab.collapsed {
  width: 25%;
  height: 419px;
  margin-right: 10px;
}

.active-collab.collapsed .active-collab-text {
  display: none;
}

纯JS逻辑（精准控制状态切换）

通过鼠标事件监听，切换目标元素的类，实现流畅的展开/收起：

// 获取操作元素
const triggerItems = document.querySelectorAll('.participate, .explore');
const activeItem = document.querySelector('.active-collab');

// 收起展开元素
function collapseActive() {
  activeItem.classList.add('collapsed');
}

// 重新展开元素
function expandActive() {
  activeItem.classList.remove('collapsed');
}

// 绑定事件
triggerItems.forEach(item => {
  item.addEventListener('mouseenter', collapseActive);
  item.addEventListener('mouseleave', expandActive);
});

关键优化点 #

1. 过渡性能：将transition: all改为仅过渡width/height/margin-right，减少浏览器重绘重排开销
2. 逻辑简化：移除冗余的.submit元素，通过类切换控制状态，避免CSS兄弟选择器的局限性
3. 事件精准性：JS监听鼠标事件比纯CSS hover逻辑更灵活，彻底解决hover bug

内容的提问来源于stack exchange，提问作者Pauli M