悬停时切换Scroll DIV内容

Question

我想创建一个div，并且将鼠标悬停在该div上时，必须将div中的contnet滚动到底部，我已经完成了以下代码，但未按要求工作，在第一次悬停时，它直接移到了div高度的底部在第二次悬停时，移交功能正常

.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;
}

如果需要更多说明，请提及。