Question

我有一个div（在#slideup内有一个带有PHOTOS的div的div），我希望“PHOTOS”位于底部，但当你将鼠标悬停在它上面时，它会向上扩展，然后标题会转到顶部的div。当你的光标离开div时，我希望“PHOTOS”返回到底部。

这是我的微弱尝试。我似乎无法将标题偏移到可查看的位置。任何帮助将不胜感激。

$("#other-guy").hover(function () {
  $("#slideup").slideToggle("fast");
});

这是一个例子（种类），http://www.barackobama.com/。在右栏中，当您将鼠标悬停在“移民改革”上时，您会看到我正在寻找的东西。唯一的区别是我希望标题贴在顶部。

Answer 1

例如，您可以使用jQuery .animate（）。请检查此FIDDLE。

这里的JS代码：

 $("#other-guy").hover(function () {
        $("#slideup").stop().animate({'bottom' : 0}, 'fast');   /* open */ 
    },

    function(){
        $("#slideup").stop().animate({'bottom' : -180}, 'fast');    /* close */
    }
);

Answer 2

您正在使用悬停效果，这就是只有将鼠标放在它上面时才显示div的原因要使用没有悬停效果的代码，请删除javascript代码并将HTML更改为

<div id="other-guy">
<div style="background: #333; color: #FFF;">PHOTOS</div>

它会起作用。并且是什么是悬停效果？只是为了您的兴趣有一个look

使用.slideToggle时可以查看标题

2 个答案: