Carousel Slider悬停项展开且不重叠其他项实现方法

悬停轮播效果参考

针对给出的HTML结构，要实现鼠标悬停单个item自动展开、其余item布局完全不变、无重叠的效果，用Flex布局实现成本最低，不需要复杂JS，核心是锁死非悬停项的尺寸，避免挤压或位移。

实现步骤 #

• 调整基础HTML结构
  在原有链接外层套轮播容器和item包裹层即可，示例结构：

  <div class="carousel-slider">
    <div class="carousel-item">
      <a href="https://i.sstatic.net/iUc9E.jpg" rel="nofollow noreferrer">Hover Images 1</a>
    </div>
    <div class="carousel-item">
      <a href="https://i.sstatic.net/iUc9E.jpg" rel="nofollow noreferrer">Hover Images 2</a>
    </div>
    <div class="carousel-item">
      <a href="https://i.sstatic.net/iUc9E.jpg" rel="nofollow noreferrer">Hover Images 3</a>
    </div>
    <!-- 可按需增加更多item -->
  </div>
  

• 编写核心CSS样式
  关键配置：容器设为弹性盒、禁止换行；每个item固定基础宽度，把flex-shrink设为0，保证非hover状态下item不会被压缩变形；hover状态只修改当前项的宽度，加过渡实现顺滑展开效果，完整可直接复用的代码如下：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  /* 轮播外层容器 */
  .carousel-slider {
    display: flex;
    gap: 10px; /* 控制item之间的间距 */
    width: 100%;
    overflow: hidden; /* 超出容器部分自动裁剪，不影响页面其他布局 */
    padding: 16px;
  }
  /* 轮播单个item */
  .carousel-item {
    /* 核心配置：固定基础宽度，禁止收缩，从根源避免重叠、挤压变形 */
    flex: 0 0 120px;
    height: 220px;
    border-radius: 8px;
    background-color: #f0f0f0;
    transition: width 0.25s ease-out; /* 展开过渡动画，时长可自行调整 */
    overflow: hidden;
    cursor: pointer;
  }
  /* 悬停时当前item展开到目标宽度 */
  .carousel-item:hover {
    flex: 0 0 300px; /* 展开后的宽度可根据需求调整 */
  }
  .carousel-item a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #222;
    text-decoration: none;
  }
  

避坑说明 #

不要给item加绝对定位属性，也不要在hover事件里修改非当前悬停项的宽度、定位值，只要保证非悬停项的收缩属性关闭、基础宽度固定，就不会出现重叠、其他item布局错位的问题。如果需要适配移动端，直接在媒体查询里修改item的基础宽度、悬停展开宽度即可。

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