Question

我有3个文本div，它应该有一个高度悬停过渡。这里的例子： http://jsfiddle.net/oLr7j7w5/

还没有文字，所以我只是想给它高度：auto;在悬停，但如果我这样做，过渡消失，它是这样的:(我只是将高度从px更改为自动！）http://jsfiddle.net/xbpqphzz/

有谁知道我怎么解决这个问题？继承我的代码（我删除了文本）

<div id="extrawurstmain">
    <div id="tcontent">
        <a class="font" id="ttext">
        </a>
    </div>
    <div id="mcontent">
        <a class="font" id="mtext">
                                </a>
    </div>
    <div id="bcontent">
        <a class="font" id="btext">
        </a>
    </div>

#tcontent{
    float: left;
    background-color: rgba(105, 105, 105, 0.5);
    border-bottom: 3px solid #FFD000;
    height: 150px;
    width: 100%;
    margin-top: 100px;
    transition: height 0.5s ease;
    overflow: hidden;

}

#mcontent{
    float: left;
    background-color: rgba(105, 105, 105, 0.5);
    border-bottom: 3px solid #FFD000;
    width: 100%;
    height: 150px;
    transition: all 0.5s ease;
    overflow: hidden;
    position: relative;
    transition: all 0.5s ease;


}

#bcontent{
    float: left;
    background-color: rgba(105, 105, 105, 0.5);
    border-bottom: 3px solid #FFD000;
    width: 100%;
    height: 150px;
    transition: height 0.5s ease;
    overflow: hidden;
}

#tcontent:hover{
    height: 250px;

}

#mcontent:hover{
    height: 250px;

}


#bcontent:hover{
    height: 250px;

}

#ttext{
    color: blue;
}

#mtext{
    color: green;
}

#btext{
    color: yellow;
}

Answer 1

问题是你不能使用高度100％，因为它没有被包含。

你可以使用Javascript（我会避免）：

<script>
var newheight = $('#innerdiv').css('height');
$('#mainwrapper').css('height', newheight);
</script>

或

更新

div.works {
    height:20px;
max-height:20px;
    display:block;
    overflow:hidden;
    -webkit-transition: max-height 0.5s linear;
}
div.works:hover {
    height:100%;
    max-height: 200px;
    -webkit-transition: max-height 0.5s linear;
}

http://jsfiddle.net/LGDWP/168/ 此方法适用于％但您需要设置max-height。一种可能性是通过JavaScript从上面的其他方法设置max-height。

Answer 2

你不能混合单位。你只能从px转换为px，％转换为％，em转换为em ......你明白了......

然而，如果你真的需要从％转换为px，那么就无法绕过JS动画......

从高度过渡：100px到100％忽略了过渡？

2 个答案: