我想要在 ReactJS 中的图像上有手风琴风格的悬停

Question

这里我创建了一个包含 3 张图像的应用程序。如果你将鼠标悬停在上面，它应该会像手风琴一样弹出，但现在当它弹出时，它会隐藏其余的图像。那么如何做到手风琴效果意味着当第一个图像弹出时，图像的其余部分像手风琴一样收缩，并且中间图像弹出应该保持像最后一个和第一个图像收缩一样的流动，并且应该保持弹出方向从中间到左和右展开，而不是从左到右，并且右侧图片弹出窗口应保持从右到左的流动。那么如何实现呢？如果有任何建议，可以告诉我吗？

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [hoveredIndex, setHoveredIndex] = useState(null);

  const imageUrls = [
    "https://images.unsplash.com/photo-1682686581551-867e0b208bd1?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    "https://images.unsplash.com/photo-1697219590638-d2db7748802e?q=80&w=1452&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    "https://images.unsplash.com/photo-1682686581427-7c80ab60e3f3?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  ];

  return (
    <div className="App">
      {imageUrls.map((imageUrl, index) => (
        <div
          key={index}
          className={`ctr-accordion ${index === hoveredIndex ? "active" : ""}`}
          onMouseEnter={() => setHoveredIndex(index)}
          onMouseLeave={() => setHoveredIndex(null)}
        >
          <div className="tab">
            <img src={imageUrl} alt={`Image ${index + 1}`} />
          </div>
        </div>
      ))}
    </div>
  );
}

CSS代码是

.App {
  display: flex;
}

.ctr-accordion {
  max-width: 1000px;
  width: 100%;
  height: 720px;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: space-around;
  gap: 10px;
  overflow: hidden;
  margin: 150px auto;
}

.tab {
  position: absolute;
  width: 20%;
  height: inherit;
  padding: 20px;
  cursor: pointer;
  transition: width 0.5s ease;
  border-radius: 25px;
  overflow: hidden;
}

.tab img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
  border-radius: 25px;
}

.ctr-accordion:first-child .tab {
  right: 0;
}

.ctr-accordion:last-child .tab {
  left: 0;
}

.ctr-accordion.active .tab {
  width: 93%;
  z-index: 2;
}

.ctr-accordion.active .tab img {
  z-index: 2;
}

和codesandbox一样 https://codesandbox.io/p/sandbox/laughing-gauss-n4f84j?file=%2Fsrc%2FApp.js%3A10%2C39

Answer 1

您使用了样式“position:absolute”，该元素从正常文档流中删除，并且页面布局中没有为该元素分配额外的空间。也就是说，“选项卡”块是独立的，不会以任何方式与其他块交互。

请尝试使用 Flex。删除“position:absolute”以及与其关联的所有样式。

然后添加班级

“.ctr-accordion”附加样式“flex：1”和

“.ctr-accordion.active”样式“flex：5”。

同时删除样式“.ctr-accordion.active .tab”