SlideToggle div over content

Question

我有2 div秒.在每个div中我都有一些内容,还有另一个默认隐藏的div,它们位于内容的顶部.当我将鼠标悬停在div上时,我希望隐藏的div向上滑动.我试过的不适合我.

代码..我只是显示它的一部分,因为两个div是相同的.HTML:

<div class="youtube">
    <h1> Youtube </h1>
    <span></span>
    <div class="yt-desc">
     <p>
        Pellentesque habitant morbi tristique senectus et
        netus et malesuada fames ac turpis egestas.
        Pellentesque habitant morbi tristique senectus et
        netus et malesuada fames ac turpis egestas.
      </p>
    </div><!-- // .yt-desc -->  
  </div> <!-- // .youtube -->

CSS:

继承人css为一,这.forums是完全一样的.我拿出了不需要的css.

.youtube, .forums { background: #3c3c3c url(../images/boxes-bg.jpg) repeat-x;  float: left; position: relative; z-index: -1; width: 260px; }
.youtube h1, .forums h1 { text-indent: -9999px; margin: 26px auto; }
.youtube { margin: 0 216px 0 0; }
.youtube h1 { background: url(../images/yt-header.png) no-repeat; height: 36px; margin: 21px; auto; width: 212px; }
.youtube span { background: url(../images/icons/youtube.png) no-repeat; display: block; height: 75px; margin: 26px auto; width: 79px; }

.youtube .yt-desc, .forums .forums-desc {  position: absolute; top: 94px; left: 0px; padding: 5px; display: none; }

yt-desc就是我想要的.但由于某种原因,它不起作用.

我试过了.

$(".youtube").hover(function () {
  $(".yt-desc").slideToggle("fast");
});

仍然没有运气.有人可以帮忙吗？:/这是我想要得到的想法 -

Answer 1

如果我理解正确,你需要这样的东西:例子

display: none在您"显示"它之前,使用不会渲染元素,因此隐藏元素overflow: hidden可能更好.

这是一个关于类似效果的很好的教程

真的没有解决你的问题,希望它无论如何都有帮助!

编辑:您的代码与我的例子:

CSS

.youtube, .forums { background: #3c3c3c url(../images/boxes-bg.jpg) repeat-x; position: relative; width: 260px; overflow: hidden;}
.youtube h1, .forums h1 { text-indent: -9999px; margin: 26px auto; }

.youtube { margin: 0 216px 0 0; }
.youtube h1 { background: url(../images/yt-header.png) no-repeat; height: 36px; margin: 21px; auto; width: 212px; }
.youtube span { background: url(../images/icons/youtube.png) no-repeat; display: block; height: 75px; margin: 26px auto; width: 79px; }

.youtube .yt-desc, .forums .forums-desc {  width: 260px; position: absolute; bottom: -200px; padding: 5px;}

JQuery的

$(".youtube").hover(  
    function(){            $(this).children("div.yt-desc").stop().animate({bottom: 0}, 500);  
    },  
    function(){              $(this).children("div.yt-desc").stop().animate({bottom: -20}, 500);  
});