Question

我在灵活的内容框中创建了一个悬停效果，该内容更改了内部框的宽度以显示内部文本。我需要此框的高度灵活，以便可以添加更多内容，但是，我不希望在悬停时更改高度。

我已链接到目前为止的下方，左边的框显示了我希望的效果，并且高度保持静态，右边的框显示了当我添加更多文本导致高度变化的问题时会发生什么当我通过将文本换行而悬停时。

.flex {
  display: flex;
  justify-content: center;
}

.box {
  width: 50%;
  background-color: red;
  border: 2px solid black;
  min-width: 200px;
  flex-direction: column;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  width: 0%;
  height: 90%;
  transition: all .5s;
}

.text {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.box:hover>.content {
  width: 90%;
}

@media(max-width: 450px) {
  .flex {
    flex-wrap: wrap;
  }
  .box {
    flex-grow: 1;
  }
}

<div class=flex>

  <div class=box>
    <div class=content>
      <div class=text>
        <h3>This</h3>
        <p>Works</p>
      </div>
    </div>
  </div>

  <div class=box>
    <div class=content>
      <div class=text>
        <h3>This doesnt</h3>
        <p>TestTe stTestTestTest TestTestTestT estTestT estTes tTestTe stTestTestTest</p>
      </div>
    </div>
  </div>

</div>

我认为我不能很好地解释这一点，但希望有人能理解。

Answer 1

您可以采取不同的思维方式，而不是为宽度设置动画，而是为其上方的覆盖层设置动画以模拟相同的效果：

.flex {
  display: flex;
  justify-content: center;
}

.box {
  width: 50%;
  background-color: red;
  border: 2px solid black;
  min-width: 200px;
  flex-direction: column;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.content {
  position: relative;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: white;
  width: 90%;
  height: 90%;
}
.content:before {
  content:"";
  position:absolute;
  top:0;
  left:50%;
  right:0;
  bottom:0;
  background:red;
  z-index:1;
  transition: all .5s;
}
.content:after {
  content:"";
  position:absolute;
  top:0;
  right:50%;
  left:0;
  bottom:0;
  background:red;
  z-index:1;
  transition: all .5s;
}

.box:hover>.content:before {
  left: 100%;
}
.box:hover>.content:after {
  right: 100%;
}

@media(max-width: 450px) {
  .flex {
    flex-wrap: wrap;
  }
  .box {
    flex-grow: 1;
  }
}

<div class="flex">

  <div class="box">
    <div class="content">
        <h3>This</h3>
        <p>Works</p>
    </div>
  </div>

  <div class="box">
    <div class="content">
        <h3>This also works!</h3>
        <p>TestTe stTestTestTest TestTestTestT estTestT estTes tTestTe stTestTestTest</p>
    </div>
  </div>

</div>

Answer 2

只需在框内添加最小高度（如最小宽度）

.box{
  width: 50%;
  background-color: red;
  border: 2px solid black;
  min-width: 200px;
  flex-direction: column;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 250px;
}

将样式悬停在灵活的高度内容框上

2 个答案: