Question

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

我该如何移动标题？

这就是我所拥有的：

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

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

当我将鼠标悬停在其上方时，将其向上移动

1 个答案: