Question

我有一个隐藏的div。我希望div能够顺利出现和隐藏。我已经应用了这个无效的CSS！它的原因是什么？

HTML：

<div class="a">
    <p>Hover Me</p>
    <div class="box">
        Some Text Some Text Some Text Some Text Some Text Some Text
    </div>
</div>

CSS：

.box {
    width: 500px;
    border: 1px solid #ccc;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
.a:hover .box {
    visibility: visible;
    transition: height 0.1s ease;
    height: auto;
}

Fiddle Work

Answer 1

如果您对使用jQuery感到满意，可以使用它来平滑过渡到悬停事件。

<强>的jQuery

$('.a p').hover(function () {
    if ($('.box').hasClass('active')) {
        $('.box').removeClass('active');
        $('.box').stop(true, false).animate({height: "0px"}, 500);
    } else {
        $('.box').addClass('active');
        $('.box').stop(true, false).animate({height: "20px"}, 500);
    }
});

这是jsFiddle

Answer 2

尝试使用不透明度：

.box {
    width: 500px;
    border: 1px solid #ccc;
    opacity:0;
    height: 0;
    overflow: hidden;
}
.a:hover .box {
    opacity:1;
    transition: height 0.1s ease;
    transition-property: opacity;
    height: auto;
}

http://jsfiddle.net/5rE47/

Answer 3

http://jsfiddle.net/jap4u/5/

也应该是跨浏览器......

.a {
    width: 100px;
    height: 200px;
}
.box {
    width: 100%;
    border: 1px solid #ccc;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}
.a:hover .box {
    max-height: 999px;
    opacity: 1;
}

顺便说一句，一类＆＃34; a＆＃34;很奇怪的做法。它可以工作，但可以考虑重命名。请注意，框高度已设置，而不是自动。此版本似乎可以使用可变高度。

css过渡不在隐藏的div工作

3 个答案: