Question

我想创建一个div，并且在div上盘旋div中的contnet必须滚动到底部，我已经完成了以下代码但它没有按预期工作，在第一次悬停时它直接进入底部div高度和第二个悬停，trasition正常工作

.komal {
      overflow: hidden;
      height: 212px;
      position: relative;
  }
  .imgpos {
      position: absolute;
      transition: all 1s ease-out 0s;
  }

<div class="col-12 col-lg-4" id="outgov" style="height: auto;">
  <div class="card card-shadowed card-hover-shadow komal dhiraj">
    <div class="card-block text-center imgpos">
      <img src="assets/home_solutions/outsourcing-governance.png" width="30%" style="margin-bottom: 20px;">
      <h2 class="card-title text-center">Outsourcing Governance</h2>
      <hr class="hr">
      <div class="row" id="outgov_hidden" style="background-color: white; z-index: 9; margin-left:-20px; padding-bottom: 20px;">
        <div class="text-center"><br>
          <h4 class="modal-title" style="color: #000">Outsourcing Governance Practice Made Easy</h4>
          <a style="margin-bottom:5px;" class="btn btn-info" href="#">Learn More</a>
          <br><br>
        </div>
      </div>
    </div>
  </div> 
</div>

$(document).ready(function () {
      var xH
      $('.dhiraj').hover(
      function () {
          xH = $(this).children(".imgpos").css("height");
          xH = parseInt(xH);
          xH = xH - 280;
          xH = "-" + xH + "px";
          $(this).children(".imgpos").css("top", xH);
      }, function () {
          $(this).children(".imgpos").css("top", "0px");
      });
  });

我希望它能够正常工作，所以请帮助我们做些什么才能让它正常工作并且看起来很好您可以通过以下链接查看现场演示：http://sequentia.xyz/demo/demo 我想（希望）像：http://domo.com（给定所需链接的主页上的每个角色部分的解决方案）

请帮我按照我目前的配色方案按照domo工作

Answer 1

您必须指定top值。否则，CSS Transition将无法知道要转换的值。

简而言之，请使用以下代码编辑代码：

.imgpos {
      top: 0px;
      position: absolute;
      transition: all 1s ease-out 0s;
}

如果需要更多解释，请提及。

在悬停和向外切换滚动DIV内容

1 个答案: