如何显示部分标题并在悬停时展开整个标题

Question

我有以下的 Fiddle： http://jsfiddle.net/nyube8aw/ HTML:

<div class="box">
    <div class="caption">
        <h3>This is Image One</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo dolor in dui lacinia gravida.</p>
    </div>
    <img src="http://i.stack.imgur.com/46ccz.jpg" />
</div>

如何修改代码，使H3保持可见状态，直到鼠标悬停并滚动整个内容。

- Si8

Answer 1

另一种方法是使用jQuery animate。请参见下面显示的示例。

$(document).ready(function() {
 $('.box').mouseenter(function(){
   $('.caption').stop().animate({height: "94%"});
  
  
    }); 
    
    $('.box').mouseleave(function(){
   $('.caption').stop().animate({height: "15%"},  500, function() {
            });
  
    });
 });

.box {
   position: relative;
   float: left;
   width: 300px;
   height: 300px;
   margin-right: 20px;
 }
 .last {
   margin-right: 0;
 }
 .caption {
   position: absolute;
   background: #000;
   opacity: 0.7;
   bottom: 0;
   left: 0;
   width: 90%;
   height: 15%; /* Auto can still work for the height */
   padding: 5%;
   color: #fff;
      padding-top:1%;
 }
 .full-height {
   height: 90%;
 }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="caption">
    <h3>This is Image One</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo dolor in dui lacinia gravida.</p>
  </div>
  <img src="http://i.stack.imgur.com/46ccz.jpg" />
</div>

在Fiddle上查看

注意：请将代码片段全屏以使其正常运行。

- Sleek Geek

---

这很棒，除了当我移开鼠标后，我希望它能立即下降而不必等待几秒钟 :) +1 个赞成使用 JQuery 的解决方案。 - Si8

鼠标进入和鼠标离开的组合可以消除对用户操作的响应延迟。现在检查它。 - Sleek Geek

是 CSS 让它变快还是两者结合使用？我希望有一个快速的动画。 - Si8

我是指从用户角度和浏览器执行的角度来看 :) 我看到了区别...谢谢。 - Si8

Answer 2

一种方法（无需jQuery，纯CSS）是在.caption元素上设置max-height。此外，还应为transition属性设置一个值。然后，当悬停在.box元素上时，将.caption元素的max-height增加到100%。 更新示例

.caption {
    /* other styling.. */
    max-height: 120px;
    transition: max-height 2s ease;
}
.box:hover .caption {
    max-height: 100%;
}

你可以将 min-height 进行过渡：

查看此 更新的示例，以查看其适用于动态内容量。

.caption {
    transition: min-height 1s ease;
    position: absolute;
    bottom: 0;
    min-height: 40px;

}
.box:hover .caption {
    min-height: 100%;
}

- Josh Crozier