Question

我正在尝试构建此功能：

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

因此，当一个盒子悬停在上面时，当盒子向上滑动时，联系人按钮会显示在框下方。我尝试了mouseenter和mouseleave方法，它有点工作但不完全如我所愿。当然，在mouseleave上，盒子会向下滑动，但我希望盒子保持不动，这样用户就可以点击“联系人”按钮了。

<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

而不是转换transform: translateY()转换translateY()，以便该元素仍将占用它在z-index转换之前所做的页面上的空间。为卡片添加背景颜色，以便您无法看到下面的隐藏内容。隐藏的p无需margin，只需将其移至HTML中的卡片之前即可。删除p上的默认left，并使用right和15px .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; }的值来偏移bootstrap的col类填充中的填充。

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

将鼠标悬停在幻灯片上并显示“联系人”按钮

1 个答案: