如何显示部分字幕并悬停在整个字幕上 [英] How to show partial caption and on hover slide up the entire caption

问题描述

我有以下小提琴： http://jsfiddle.net/nyube8aw/

HTML：

 < div class =box> 
< div class =caption> 
< h3>这是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直到悬停，才能滚动整个内容。 / p>


解决方案

另一种方法是jQuery animate。请参阅下面的示例。

  $（document）.ready（function（）{$（' ）{$（'。caption'）。stop（）。animate（{height：94％}）;}）; $ .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;背景：＃000;不透明度：0.7; bottom：0;左：0;宽度：90％;身高：15％; / *自动仍然可以工作的高度* / 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>这是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>  

div>

See Fiddle 请注意：请全屏显示该代码段，以便在工作中查看。

I have the following 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>

How can I modify the code so the H3 stays visible until hover which scrolls the entire content up.

解决方案

Another method would be jQuery animate. See the example shown below.

$(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>

See on Fiddle

Note: Please go full screen on the snippet to see it at work,

这篇关于如何显示部分字幕并悬停在整个字幕上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！