html - CSS3 过渡 : how to add transition on hover to this div?

Question

我在这个 div 上添加了一些悬停时可见的内容。

一直工作到这里:jsbin.com/ipajas/

但是由于内容是动态加载的，所以我不知道内容的确切高度。所以我将高度从 height:250px; 更改为 height:auto;问题是:在那种情况下，过渡不再有效。 jsbin.com/ipajas/2

代码如下:

HTML:

<a>
    <div class="divabsence" id="id" onClick="expand()">
        chose your color:

        <p> red <input type="checkbox" id="button"></p>
        <p> blue <input type="checkbox" id="button"></p>
        <p> green <input type="checkbox" id="button"></p>
        <p> white <input type="checkbox" id="button"></p>

    </div> 
</a>  

CSS:

 .divcolor
    {
    width:120px;
    height:30px;
    background:red;
    transition:  1s; 

  overflow:hidden;
    }

    .divcolor:hover
    {
    height:auto; 
    }

更新

这似乎是不可能的，我只是将其添加为临时解决方案: 高度:150px；溢出:滚动； jsbin.com/ulodil/4

Answer 1

根据CSS Specs只有 length、percentage 或 calc 是有效类型，auto 不是。

您可以使用具有足够大值的 max-height 而不是 height:

.divcolor
{
  max-height:30px;
  ...
}

.divcolor:hover
{
  max-height: 1000px; <- something just big enough for your needs 
}