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

我在这个div上添加了一些内容，这些内容会在悬停时显示。CSS3 Transition：如何在悬停时添加转换到这个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; 
    }

UPDATE

这似乎是IM可能的话，我刚刚加入这个作为临时解决方案： height: 150px; overflow:scroll;jsbin.com/ulodil/4

来源

2013-07-03 Asme Just

按照CSS Specs只有长度，百分比或钙是有效的类型，而不是汽车。

相反的height可以使用max-height有一个足够大的值：

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

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

来源

2013-07-03 20:33:30 zeroflagL

是的，但问题是，我不希望有一个长期滚动如果内容是不是只要有内容 –

'MAX-height'后别的东西像一个确认按钮与'auto'类似，但是有一个上限。它只与内容一样大，但不大于'1000px' :) – zeroflagL

我知道，内容从10到100不等。所以你知道......我只是把它作为一个临时解决方案加入：'height：150px ; 溢出：滚动; ' –

你可以一切都加载到<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"; 

}

来源

2013-07-03 20:48:00

是的，我知道JavaSript可以给我解决方案，但我遇到了CSS3的限制...无论如何，谢谢你 –

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

回答

相关问题