滑过了悬停一个div并显示联系人按钮

Question

我想建立这样的功能：

http://www.liveyourdream.org/take-action/index.html

因此，当一个框上空盘旋，盒子的框下的接触按钮显示向上滑动。我尝试了mouseenter和mouseleave方法，它有点不错，但并不完全如我所愿。当然，在mouseleave框中可以滑回，但我希望框保持不变，以便用户可以单击Contact按钮。

<div class="container top"> 
<div class="row"> 
    <div class="col-sm-6"> 
     <div class="card card-block"> 
     <h4 class="card-title">Opportunity title</h4> 
     <p class="card-text">Opportunity description, lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget magna consectetur, ultrices sem ac, ultricies dolor. Vivamus eget venenatis nulla. Nunc vitae purus mi. Fusce sed iaculis massa.</p> 
     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
     </div>   
    </div> 
    <a class="btn" href="#">Contact</a> 
    <div class="col-sm-6"></div> 
</div> 
</div> 

和：

$('.card-block').mouseenter(function() { 
    $('.card-block').animate({top: -20}, 5); 
}); 
$('.card-block').mouseleave(function() { 
    $('.card-block').animate({top: 20}, 5); 
}); 

下面是我在卡片的底部至今https://jsfiddle.net/eykg89js/

联络按钮应该做的。我也使用Bootstrap。有什么想法吗？

Answer 1

而不是转换margin转换transform: translateY()而不是转换，以便该元素仍将占用它执行的页面上的空间转换。为卡片提供背景颜色，以便在下方看不到隐藏的内容。不需要隐藏p上的z-index，只需将其移动到HTML中的卡片之前即可。删除p上的默认margin，并使用left和right的值15px来抵消引导程序的col类填充的填充。

.top {margin-top: 60px;} 
 
.card-block {transition: 0.5s ease; background: white;} 
 
.card-container:hover .card-block { cursor: pointer; transform: translateY(-30px); } 
 
.info { 
 
    position:absolute; 
 
    bottom:0; 
 
    left:15px; 
 
    right: 15px; 
 
    margin: 0; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<div class="container top"> 
 
    <div class="row"> 
 
     <div class="col-sm-6 card-container"> 
 
      <p class="info">More info here</p> 
 
      <div class="card card-block"> 
 
      <h4 class="card-title">Opportunity title</h4> 
 
      <p class="card-text">Opportunity description, lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget magna consectetur, ultrices sem ac, ultricies dolor. Vivamus eget venenatis nulla. Nunc vitae purus mi. Fusce sed iaculis massa.</p> 
 
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
 
      </div> 
 
      
 
     </div> 
 
     <div class="col-sm-6"></div> 
 
    </div> 
 
</div>