0

我在这个 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; 
    }

更新

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

4

2 回答 2

2

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

height您可以使用max-height足够大的值代替：

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

.divcolor:hover
{
  max-height: 1000px; <- something just big enough for your needs 
}
于 2013-07-03T20:33:30.190 回答
1

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

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

JSBIN - 示例在这里

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";

}
于 2013-07-03T20:48:00.540 回答