悬停可顺利向上移动 div 卡

Question

所以我有一个 div，它是一张卡片和其中的内容。我设法让它向上移动一点，但过渡属性似乎不起作用。

这是 HTML 代码

<div class="card">
  <p> Title </p>
</div>

这是 CSS 代码

.card:hover {
 position: relative; 
 top: -10px;
 transition: 1s;

}

所以基本上有多个卡片，并且当鼠标悬停在 .card 类的每张卡片上时它都会向上移动，但它会瞬间移动，过渡不起作用。有谁知道如何修复它？祝你有美好的一天

Answer 1

这是因为您仅在

position

代码块中指定了

transition

和

:hover

，这意味着直到悬停已经发生之后才指定转换时间。换句话说，仅悬停时更改的项目（

top

值）应位于

:hover

中。

在

position

块之外指定

transition

和

:hover

，例如：

.card {
  position: relative;
  transition: 1s
}

.card:hover {
  top: -10px;
}

Answer 2

您可以使用

transform: translateY

试试这个

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  border: 1px solid black;
  width: 150px;
  height: 150px;
  cursor: pointer;
  transition: all .5s ease-in-out;
}

.box:hover {
  transform: translateY(-10px);
}

<div class="box"></div>

Answer 3

不用使用

top

，它需要一个位置属性将其移出流程，只需添加一个边距来替换元素：

.card:hover {
  margin-top: -20px;
  margin-bottom: 20px;
  transition: 1s;
}


/* for visualization purpose only */
body {
  padding-top: 50px;
}

div {
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40vh;
  width: 10vw;
}

<div class="card">Card</div

Answer 4

@Mohamad 的回答很正确，但如果您想要更流畅的动画和更短的动作，请尝试：

.box {
  transition: all .3s ease-in-out;
}

.box:hover {
  transform: translateY(-5px);
}