Question

我在这个div上添加了一些内容，这些内容将在悬停时显示。

但是，由于内容是动态加载的，我不知道它正是内容的高度。所以我将高度从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; 
    }

的更新 的

这似乎是不可能的，我只是将其添加为临时解决方案： height: 150px; overflow:scroll; jsbin.com/ulodil/4

Answer 1

根据CSS Specs，只有长度，百分比或计算是有效类型，而不是自动。

而不是height，您可以使用max-height来获得足够大的值：

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

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

Answer 2

您可以将所有内容加载到<ul>中，并根据<li>元素的数量动态设置高度。根据动态加载内容的方式，您可以通过JavaScript或某些服务器端脚本来完成。

您可以添加尽可能多的<li>元素，并调整高度。

JSBIN - Sample Here

function adjustHeight()
{
  var itemList = document.getElementById('color-list');
  var items = itemList.getElementsByTagName('li');

  var listHeight = items.length * 25;

  document.getElementById('id').style.height = (50 + listHeight) + "px";

}

CSS3 Transition：如何在悬停到这个div时添加转换？

2 个答案: