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

如果我理解正确，你需要这样的东西：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);  
});

Answer 2

像http://jsfiddle.net/ambiguous/ENpsH/3/这样的人应该工作;我从样品中剥离了所有无关的东西，然后开始重新放入必要的东西。基本的想法是将滑动<div>方式放在容器下方，然后当你知道容器有多高时将它塞到边缘上是;然后，您可以简单地在悬停操作上向上和向下设置top动画。

Answer 3

$(".youtube").hover(
  function() { $(this).children(".yt-desc").show("fast"); },
  function() { $(this).children(".yt-desc").hide("fast"); }
);

这应该有效。我希望

Answer 4

我发现了问题。在CSS文件行43：

.youtube, .forums { background: #3c3c3c url(../images/boxes-bg.jpg) repeat-x; border: 1px solid #3c3c3c; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; float: left; position: relative; z-index: -1; width: 260px; }

删除Z-index：-1;

我修复了javascript只是为了让它显示在屏幕上，现在你需要修复这些值：

  $(".youtube").hover(  
        function(){ 
            $(this).children(".yt-desc").show().animate({top: '+=50',});
        },  
        function(){ 
            $(this).children(".yt-desc").hide().animate({top: '-=50',});
        }
    );