当我将鼠标悬停在 div 上时将其向上移动 [重复]答案

【问题标题】：Move a div up when I hover over it [duplicate]当我将鼠标悬停在 div 上时将其向上移动 [重复]
【发布时间】：2019-06-22 00:20:46
【问题描述】：

我有一张卡片，卡片中间有一些标题，当我将鼠标悬停在卡片上时，卡片底部会出现一个提交按钮。但我想要的是卡片底部的标题，当我悬停时，标题会移到中心，提交按钮出现在按钮上。

我怎样才能这样移动我的标题？

这就是我所拥有的：

 <div class="container">
  <div class="center">
      <a ...>{title}</a>
    </Link>
  </div>

  <div class="bottom">
    <button ...> Submit </button>
  </div>
</div>


.container {
  position: relative;
  display: flex;
  border-radius: 6px;
  overflow: hidden;

  button {
     position: absolute;
     opacity: 0;

     :hover {
       background-color: black;
     }
  }

  :hover button {
     opacity: 1;
  }
}

 a {
   display: block;
   align-self: center;
 }

 .bottom {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
 }

 button {
   left: 0px;
   position: absolute;
 }

【问题讨论】：

帮自己一个忙，使用 GSAP 库。这是 TweenLite 的 2 秒工作。
请记住，这种 UX 在移动设备上表现不佳。

标签： html css

【解决方案1】：

这是我能想到的最简单的解决方案：

.container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 200px;
      width: 200px;
      overflow: hidden;
      border: 1px solid #000;
    }
    .center{
    	margin-top: 150px;
    	transition: all .4s ease-in-out;
    }
    .container:hover .center{
    	margin-top: 20px;
    }
    
    .bottom{
    	opacity: 0;
    	visibility: hidden;
    	transform: translateY(100px);
    	transition: all .4s ease-in-out;
    }
    
    .container:hover .bottom{
    	opacity: 1;
    	visibility: visible;
    	margin-bottom: 20px;
    	transform: translateY(0);
    }

<div class="container">

	  <div class="center">
	      <a>Title</a>
	  </div>

	  <div class="bottom">
	    <button> Submit </button>
	  </div>
</div>

【讨论】：