我有以下小提琴：http://jsfiddle.net/nyube8aw/ 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="https://i.stack.imgur.com/46ccz.jpg" />
</div>
我怎样才能修改代码，使 H3 保持可见，直到悬停向上滚动整个内容。
另一种方法是 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="https://i.stack.imgur.com/46ccz.jpg" />
</div>
见小提琴 http://jsfiddle.net/o0vdchps/1/
Note:请全屏显示该片段以查看其工作情况，
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
