將寬度懸停在靈活高度的內容框上

Question

我在一個靈活的內容框上創建了一個懸停效果，它改變了一個內框的寬度以顯示里面的文本。 我需要這個框的高度靈活，以便可以添加更多內容，但是，我不希望懸停時高度發生變化。

我已經鏈接到了目前為止的內容，左側的框顯示了我想要的靜態高度效果，右側的框顯示了當我添加更多文本時會發生什么，這會導致我懸停時高度發生變化的問題通過將文本包裹在其中。

https://jsfiddle.net/ndpty6xa/

 .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

只需將min-height像min-width 添加到框

.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;
}