如何实现鼠标悬停时可向下展开的动画盒子？

方案一：纯CSS实现（简单高效，推荐） #

不需要JavaScript，利用CSS的:hover伪类和过渡动画就能完成，适合你的场景。

1. 调整HTML结构

给每个服务项里的文本区域添加一个类名（比如services-content），方便样式控制：

<div class="services-item">
  <div class="services-sub">
    <a href=""><img src="assets/images/r1.jpg" alt="img" class="img-fluid"></a>
  </div>
  <!-- 添加services-content类 -->
  <div class="services-content">
    <h4>Unique Orders, Unique Adventures</h4>
    <p>Your vision, our creation. Explore Cherrybery Studios' unique order service, where you can request custom mods tailored to your preferences. Elevate your gaming experience with personalized addons and plugins.</p>
  </div>
</div>

2. 添加CSS样式

/* 服务项容器基础样式 */
.services-item {
  overflow: hidden;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  /* 可选：添加阴影增强立体感 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 图片自适应 */
.services-sub img {
  width: 100%;
  display: block;
}

/* 文本区域默认状态：隐藏溢出，高度为0，添加过渡动画 */
.services-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  padding: 0 1.2rem;
}

/* 悬停时展开文本区域 */
.services-item:hover .services-content {
  max-height: 300px; /* 设置足够容纳内容的高度，可根据实际调整 */
  padding: 1.2rem;
}

方案二：JavaScript实现（适合扩展复杂逻辑） #

如果需要后续添加更多交互逻辑（比如延迟收起、点击展开等），可以用JS配合CSS过渡实现。

1. 同样调整HTML结构（添加services-content类）

和方案一的HTML修改一致。

2. 基础CSS样式

.services-item {
  overflow: hidden;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.services-sub img {
  width: 100%;
  display: block;
}

.services-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  padding: 0 1.2rem;
}

/* 展开状态的类 */
.services-content.expanded {
  max-height: 300px;
  padding: 1.2rem;
}

3. JavaScript代码

// 获取所有服务项元素
const serviceItems = document.querySelectorAll('.services-item');

// 遍历每个服务项，添加鼠标事件监听
serviceItems.forEach(item => {
  const content = item.querySelector('.services-content');
  
  // 鼠标进入时添加展开类
  item.addEventListener('mouseenter', () => {
    content.classList.add('expanded');
  });
  
  // 鼠标离开时移除展开类
  item.addEventListener('mouseleave', () => {
    content.classList.remove('expanded');
  });
});

注意事项 #

• max-height的值需要根据你的文本内容高度调整，确保能完全显示所有内容；
• 过渡时间0.5s可以自行修改，数值越小动画越快；
• 可以给.services-item:hover添加背景色变化、阴影加深等样式，进一步增强交互反馈。

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