Question

我使用Chrome扩展程序来折叠网页上的某些分区。而且一切都很好。我制作它的高度为50px，当你将它悬停在它上面时，它就变成了它通常的高度。简而言之，这就是我的代码所做的：

检查div的高度 - ＆gt; checkedHeight
应用CSS规则：max-height：50px
在Hover上应用CSS规则：max-height：checkedHeight

这就像一个魅力。但！！！当div加载额外内容时，它会变长。无论如何我可以将max-height设置为元素的首选高度吗？我知道我可能不会使用max-height，但我想使用css3过渡来使div逐渐扩展。

Answer 1

你能不能在悬停时设置max-height: none吗？

Answer 2

<script>
    function collapse(target) {
        target.style.maxHeight = '50px';
    }
    function expand(target) {
        target.style.maxHeight = target.scrollHeight + 'px';
    }
</script>

<style>
    #test {
        max-height: 50px;
        background:lightgray;
        overflow: hidden;

        -moz-transition: 1s;
        -ms-transition: 1s;
        -o-transition: 1s;
        -webkit-transition: 1s;
        transition: 1s;
    }
</style>

<div id="test" onmouseover="expand(this)" onmouseout="collapse(this)">
    text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
    text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
    text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
</div>

获得div的首选高度

2 个答案: