jquery - SlideToggle div 覆盖内容

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

如果我没理解错的话，你想要这样的东西:example

使用 display: none 在您“显示”它之前不会呈现该元素，因此使用 overflow: hidden 隐藏该元素可能更好。

Here is a nice tutorial on a similar effect

没有真正解决您的问题，希望对您有所帮助!

编辑: 你的代码和我的例子:

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