使弹性项目在悬停时增长而不影响其他弹性元素，同时在不悬停时保持盒子高度相同答案

【问题标题】：Make a flex item grow at hover without affecting the other flex elements, while keep box heights equivalent when not hovered使弹性项目在悬停时增长而不影响其他弹性元素，同时在不悬停时保持盒子高度相同
【发布时间】：2021-08-30 11:23:27
【问题描述】：

我在 flex 容器中有盒子元素。我希望将鼠标悬停在框上时显示框中的段落。但是，悬停的框使其他框也增长。有没有办法在悬停一个框时避免影响其他框？
我会尝试：align-items:flex-start，但我希望框在未悬停时的高度相同。
所以 align-items:flex-start 在它们没有悬停时不会保持盒子的高度相等。
我希望框在悬停时放大而不影响其他框，并在未悬停时返回到等效高度。

Codepen 链接：https://codepen.io/lemour-sudo/pen/yLMQOpE

.container > * {
  width: 25em;
  padding: 1em;
  text-align: center;
}

.container {
  display: flex;
  justify-content: space-around;
  margin: 3em 10em;
  border: solid 3px green;
}

p {
  display: none;
}

.box {
  border: solid 3px red;
}
.box:hover p {
  display: block;
}

<div class="container">
  <div class="box">
    <h1>Box 1</h1>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam tenetur amet dignissimos, accusantium molestias tempora!
    </p>
  </div>
  <div class="box">
    <h1>Box 2</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto voluptatum labore totam natus illo, magni inventore cupiditate hic omnis ipsam vero nobis enim dicta perferendis facilis tenetur quaerat! Voluptas, voluptatum.
    </p>
  </div>
</div>

【问题讨论】：

你最好使用网格

标签： html css

【解决方案1】：

我不确定如何做你想做的事，但我认为这种方式更好。它更可定制。我同意 vals 的回答，但如果您不想让容器一直向下增长，这种方式会更好。

* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

.con {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: 3px solid black;
}

.item {
    border: 3px solid red;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: cadetblue;
}

.text-con {
    position: absolute;
    width: 100%;
    top: 100%;
    display: none;
    background-color: cadetblue;
}

.item:hover .text-con {
    display: block;
}

<!DOCTYPE html>
<html>
<head>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
    <div class="con">
        <div class="item">
            <h1>box1</h1>
            <div class="text-con">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minus consequatur similique quas excepturi dignissimos optio nulla possimus</p>
            </div>
        </div>
        <div class="item">
            <h1>box2</h1>
            <div class="text-con">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minus consequatur similique quas excepturi dignissimos optio nulla possimus</p>
            </div>
        </div>
        <div class="item">
            <h1>box3</h1>
            <div class="text-con">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minus consequatur similique quas excepturi dignissimos optio nulla possimus</p>
            </div>
        </div>
    </div>
</body>
</html>

【讨论】：

悬停有效。我希望卡片在不悬停时会自动具有相同的高度（无需明确指定高度）。

【解决方案2】：

可以在容器悬停时设置 flex-start 吗？

.container > * {
  width: 25em;
  padding: 1em;
  text-align: center;
}

.container {
  display: flex;
  justify-content: space-around;
  margin: 3em 10em;
  border: solid 3px green;
}

.container:hover {
  align-items: flex-start;
}

p {
  display: none;
}

.box {
  border: solid 3px red;
}
.box:hover p {
  display: block;
}

<div class="container">
  <div class="box">
    <h1>Box 1</h1>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam tenetur amet dignissimos, accusantium molestias tempora!
    </p>
  </div>
  <div class="box">
    <h1>Box 2 bigger than 1</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto voluptatum labore totam natus illo, magni inventore cupiditate hic omnis ipsam vero nobis enim dicta perferendis facilis tenetur quaerat! Voluptas, voluptatum.
    </p>
  </div>
</div>

另一种解决方案，初始状态的高度不同

.container > * {
  width: 25em;
  padding: 1em;
  text-align: center;
}

.container {
  display: flex;
  justify-content: space-around;
  margin: 3em 10em;
  border: solid 3px green;
}

.container:hover {
  align-items: flex-start;
}

p {
  display: none;
}

.box {
  border: solid 3px red;
  height: fit-content;
}
.box:hover p {
  display: block;
}

<div class="container">
  <div class="box">
    <h1>Box 1</h1>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam tenetur amet dignissimos, accusantium molestias tempora!
    </p>
  </div>
  <div class="box">
    <h1>Box 2 bigger than 1</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto voluptatum labore totam natus illo, magni inventore cupiditate hic omnis ipsam vero nobis enim dicta perferendis facilis tenetur quaerat! Voluptas, voluptatum.
    </p>
  </div>
</div>

【讨论】：

悬停有效。但是，如果一张卡片最初包含的内容多于另一张卡片，则卡片的高度不同。我希望它们在不悬停时具有相同的高度，即使其中包含更多内容。但是让悬停的卡片展开而不影响其他卡片。
我不明白你的评论“不一样的高度，如果一个......”我已经编辑了 sn-p，使一个更大，它们对我来说是相同的高度。
我的错误。我不知道我没有更新问题中的代码。我希望盒子在不悬停时最初具有不同数量的内容。谢谢。
添加了另一个 sn-p
这就是我的意思。是否可以在最初将它们保持在相同的高度但只让悬停的框增长而不影响另一个？