Question

下面是div中div的代码，使用css转换可以滑动到50％。我的课程和身份证明我遇到了问题。 CSS是正确的，但我不能让它工作，有人可以告诉我我哪里出错了吗？

提前致谢。

CSS

<style>
    .maincontentdiv {
        position:relative;
        height:200px;
        width:200px;
        background:red;
    }
    .slideup {
        position:absolute;
        bottom:0;
        max-height:0;
        overflow:hidden;
        background:blue;
        transition:max-height 250ms ease-in;
    }
    .maincontentdiv:hover {
        max-height:50%;
    }
</style>

HTML

<div class="maincontentdiv">
    <div class="slideup"></div>
</div>

当我使用div和div div而不是类和id时它工作正常，但是当我尝试使用类和id时它停止工作所以我不认为这将是实际的代码：）

Answer 1

http://jsbin.com/slideUpUsingMinHeight/

.maincontentdiv {
    position:relative;
    height:200px;
    width:200px;
    background:red;
}
.slideup {
    position:absolute;
    width:100%;         /* Absolute el. loose width so... */
    bottom:0;
    min-height:0;       /* Use min- height instead */
    background:blue;
    transition: min-height 250ms ease-in;  /* target min-height respectively */
}
.maincontentdiv:hover > .slideup {  /* hover el > children selector */
    min-height: 50%;    /* and animate! */
}

Answer 2

您必须定义小div的width＆amp; height。属性max-height只是设置高度限制，而不是定义它。

其次你需要悬停大的div而不是小的div，因为它的宽度和高度都是0，你怎么能将它悬停？

Demo

希望这会有所帮助。; - ）

悬停时css类转换不起作用

2 个答案: