SlideToggle div 覆盖内容

Question

我有 2 个divs。在每个 div 中，我都有一些内容，还有另一个 div，默认情况下是隐藏的，并且相对位于内容的顶部。当我将鼠标悬停在 div 上时，我希望隐藏的 div 向上滑动。我尝试的方法对我不起作用。

code.. 我只展示它的一部分，因为两个 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',});
        }
    );