从固定高度到自动悬停

Question

我希望在从固定高度悬停到孩子的整个高度时显示一些文字，但似乎无法使其正常工作。

以下是摘录：

＆＃13;

＆＃13;

.c1 {
    width: 50%;
    max-height: 100px;
    background: red;
    overflow:hidden;
    transition: max-height 4s ease-in;
}

.c1:hover {
    max-height: auto;
}

＆＃13;

<div class="c1">
  <div style="width:auto;height;300px">
    text text text text text text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text text
</div>
  </div>

＆＃13;

＆＃13;

＆＃13;

我希望红色区域能够缓慢向下扩展，以显示文本的其余部分。有什么想法吗？

Answer 1

您的问题是max-height没有值auto。

你在寻找什么是max-height: none，但是不可动画。要为此过渡设置动画，您必须为其指定特定高度。

如果您

，请将您的Css悬停类改为此类

.c1:hover {
    /* No Animation*/
    max-height: none;
}

或

.c1:hover {
    /* With Animation*/
    max-height: 300px;
}

这是来自CSS Tricks的Chris Coyier谈论它。 https://css-tricks.com/css-animate-fromto-auto/

现在，你真的不应该使用内联CSS和链接CSS。并且有一些冗余代码，例如，您根本不需要添加的内联css。

Answer 2

您需要在css和html中更改几行。

＆＃13;

＆＃13;

.c1 {
  width: 50%;
  height: 100px;
  background: red;
  overflow:hidden;
  transition: max-height 4s ease-in;
}

.c1:hover {
  height: auto;
}

＆＃13;

<div class="c1">
  <div >
    text text text text text text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text text
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

.c1 {
    width: 50%;
    height: 100px;
    background: red;
    overflow:hidden;
    transition: max-height 4s ease-in;
}

.c1:hover {
    height: auto;
}

<div class="c1">
  <div style="width:auto;height;300px">
    text text text text text text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text text
</div>
  </div>

Answer 4

使用高度而不是 max-height 。它会正常工作，我已经添加了下面的代码段

＆＃13;

＆＃13;

.c1 {
    width: 50%;
    height: 100px;
    background: red;
    overflow:hidden;
    transition:height 4s ease-in;
}

.c1:hover {
    height: 200px;
}

＆＃13;

<div class="c1">
  <div style="width:auto;height;300px">
    text text text text text text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text text
</div>
  </div>

＆＃13;

＆＃13;

＆＃13;

您可以加快过渡调整过渡时间

＆＃13;

＆＃13;

.c1 {
    width: 50%;
    height: 100px;
    background: red;
    overflow:hidden;
    transition:height 0.5s ease-in;
}

.c1:hover {
    height: 200px;
}

＆＃13;

<div class="c1">
  <div style="width:auto;height;300px">
    text text text text text text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text text
</div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

使用此

修改您的CSS

.c1 {
    width: 50%;
    height: auto;
    background: red;
    overflow:hidden;

}


.expand{
  height:100px;
  overflow:hidden;
  transition: height 4s ease-in;
}

.expand:hover {
    height: auto;
    transition: height 4s ease-in;
}

和HTML

<div class="c1">
  <div class="expand">
    text text text text text text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text text
</div>
  </div>

如果您在鼠标悬停上进行动画处理，则可以将固定高度属性设置为.expand:hover

工作演示https://jsfiddle.net/Rahul_Ravi/Lvecptnx/

Answer 6

＆＃13;

＆＃13;

.c1 {
    width: 50%;
    height: 100px;
    background: red;
    overflow:hidden;
    transition:height 4s ease-in;
}
.c1:hover {
    height: 250 !important;
}

＆＃13;

<div class="c1">
  <div style=" width:auto;">
   Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample  Sample 
</div>
  </div>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

.c1 {
    width: 50%;
    height: 100px;
    background: red;
    overflow:hidden;
    transition:height 4s ease-in;
}
.c1 div{
  width:auto;
}
.c1:hover {
    height: auto;
    transition:height 4s ease-in;
}

＆＃13;

<div class="c1">
  <div>
    text text text text text text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text text
</div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 7

css中几乎没有变化，并从html中删除内联css。您必须在悬停功能上为css动画定义特定高度。

＆＃13;

＆＃13;

softwareArchitect

＆＃13;

.c1 {
  width: 50%;
  height: 100px;
  background: red;
  overflow: hidden;
  transition: height 1s ease-in;
}
.c1:hover {
	height: 300px;
}

＆＃13;

＆＃13;

＆＃13;