CSS转换在隐藏div中不工作

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;
} 

小提琴作品

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;
}

作为题外话，类"a"是一种奇怪的做法。它将工作，但可能会考虑重命名。请注意，框的高度是设置的，而不是自动的。这个版本似乎可以使用可变高度