Question

好吧，我有一个50px（高度）的div，宽度与显示标题无关紧要。我想使用jquery，所以当我将鼠标悬停在div上时，它会向上扩展到（70px）以显示隐藏在标题下方的内容

<div id="box">
<h1>Title Goes Here</h1>
<p>this is the hidden text</p>
</div>

Answer 1

这个片段应该可以解决问题：

$(function() {
    $("#box").hover(function() {
        $("#box").animate({'height': '70px', 'top': "-20px"});
    }, function() {
        $("#box").animate({'height': '50px', 'top': "0px"});
    });
});

这是一个现场演示：http://jsfiddle.net/MeBxJ/

Answer 2

$("#box").hover(function(){
    $("#box").css('height','70px');
}, function(){
    $("#box").css('height','50px');
});

编辑：我只是理解你想如何向上扩展。如果您的设计允许，我只有一个解决方案：使用position：absolute和bottom：x value。该框将向上扩展

Jquery：扩展Div Upwards

2 个答案: