Question

我希望div'expand'在悬停时扩展到设定的高度，然后在鼠标移出时恢复到div的原始高度。

我的问题是'expand'中的图像需要保持成比例，因此其高度将根据浏览器宽度而变化。

所以我需要一些代码（html，css，javascript，jQuery，PHP等），它们将div'expand'设置为在悬停时扩展到预设高度，然后恢复为图像的高度（加上所有面都有5个像素填充）。

标记：

  <html>
    <head>
    <style>
    .expand{
        background-color: red;
        height: auto;
        padding: 5px;
        width: 18%;
    }
    </style>
    </head>
    <body>
    <div class="expand">
        <img src="http://yabooks.ml/Images/The Dmon King.jpg" style="width: 100%;">
        <h3>The Demon King</h3>
        <h5>Cinda Williams Chima</h5>
        <p>jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'</p>
    </div>
    </body>
  </html>

Answer 1

您必须首先获得要展开的div的原始高度，如下所示：

var height = $（＆＃34; .expand＆＃34;）。css（＆＃39; height＆＃39;）;

并使用div将.animate设置为所需的高度，让我们说500px：

$(".expand").on("mouseenter",function(){
    $(this).animate({"height":"500px"},"slow");
})

并将动画恢复到原始高度：

var height = $(".expand").css('height');
$(".expand").on("mouseleave",function(){
    $(this).animate({"height":height},"slow");
})

注意：请务必关闭所有tags。我注意到您的<img>没有结束，这就是为什么<p>标记不会包含在div内的原因。我在此FIDDLE

中解决了这个问题

Answer 2

您希望使用jQuery的mouseover和mouseout函数以及animation函数。您需要选择div并将函数绑定到其onmouseover事件。请考虑以下格式的HTML body：

<div id="expand">
    <img src="http://yabooks.ml/Images/The Dmon King.jpg" style="width: 100%;">
    <h3>The Demon King</h3>
    <h5>Cinda Williams Chima</h5>
    <p>Text</p>
</div>

在这里，我们已经为您div id＆＃34;展开＆＃34;，因此我们可以使用jQuery轻松选择它并将功能绑定到它{{s} { {1}}使用onmouseover函数的事件：

mouseover

要获得var expanded = "2000px"; var time = 2000; $("#expand").mouseover(function(){ $( "#expand" ).animate({ height: expanded }, time); });合同，您需要使用jQuery的div函数绑定到元素的mouseout事件：

onmouseout

这种情况下的$("#expand").mouseout(function(){ $( "#expand" ).animate({ height: contracted }, time); });功能很难在jsfiddle中展示，但希望以下jsfiddle可以帮助您获得所需的行为：http://jsfiddle.net/9dmzytm7/

扩展Div以适应比例图像

2 个答案: