鼠标hover对图像的影响

最初图像仅可见，按钮隐藏在图像后面。 在图像鼠标hover时，图像向上移动，按钮将位于图像的底部。 但如何在图像中隐藏按钮？

在鼠标hover之前，只有在鼠标hover在图像上并且可见按钮后才能看到图像。 我试过这样但没有得到，这里的片段作为参考（ http://www.olleep.com/ ）我试图做同样的事情

$(document).ready(function() { $('#textbox').mouseenter(function() { $('#textbox').animate({ 'marginTop' : "-=30px" //moves up }); }); $('#textbox').mouseleave(function() { $('#textbox').animate({ 'marginTop' : "+=30px" //moves up }); }); }); 

 .container{ margin:50px; } #textbox{ position:relative; width:300px; } #text{ position:relative; overflow:hidden; z-index:1; background-color:#282727; text-align:center; padding:10px 10px 10px 10px; } 

    
 
  
 MORE INFO BOOK NOW
 
  

Answer 1

您可以单独使用CSS，仍然添加hover效果，然后使用transform:translateY在屏幕上切换这些：

 div { display: inline-block; } .wrapper { overflow: hidden; position:relative; } .buttons{ position:absolute; bottom:0; width:100%;background:dimgray; font-size:0;height:40px; transition:all 0.4s; transform:translateY(100%); } .buttons button{ width:40%;margin:5%;font-size:15px; } .wrapper img{ transition:all 0.4s;} .wrapper:hover .buttons{ transform:translateY(0); } .wrapper:hover img{ transform:translateY(-35px); } 

 
  
 Button 1 Button 2 
  

Answer 2

你可以使用CSS来做到这一点。 尝试:hover ，请查看以下示例。

 .container { margin: 50px; } #textbox { position: relative; width: 300px; } #text { position: relative; overflow: hidden; z-index: 1; background-color: #282727; text-align: center; padding: 10px 10px 10px 10px; display: none; } #textbox:hover #text { display: block; } 

    
 
  
 MORE INFO BOOK NOW 
 
  

Answer 3

添加$('#text').show(); 和$('#text').hide();

 $(document).ready(function() { $('#textbox').mouseenter(function() { $('#text').show(); $('#textbox').animate({ 'marginTop' : "-=30px" //moves up }); }); $('#textbox').mouseleave(function() { $('#text').hide(); $('#textbox').animate({ 'marginTop' : "+=30px" //moves up }); }); }); 

 .container{ margin:50px; } #textbox{ position:relative; width:300px; } #text{ position:relative; overflow:hidden; z-index:1; background-color:#282727; text-align:center; padding:10px 10px 10px 10px; } 

    
 
  
 MORE INFO BOOK NOW
 
  

Answer 4

你可以用简单的.show()和.show()来做到这一点。

检查这个http://codepen.io/vigneshvdm/pen/PNLJKL