Question

将鼠标悬停在绝对定位的div上时尝试添加转换时间，该div将20px添加到顶部。悬停效果正常，但过渡时间没有生效。

SCSS：

div {
  position: relative;
  margin: 0 auto;
  height: 400px;
  width: 300px;
  background-color: grey;
  transition: all 5s;
  &:hover {
    top: 20px;
  }
}

CodePen：https://codepen.io/KevinM818/pen/YYZqKY

Answer 1

将top属性的初始值设置为0px。

div {
  position: relative;
  margin: 0 auto;
  height: 400px;
  width: 300px;
  background-color: grey;
  transition: all .5s;
  top: 0px;
  &:hover {
    top: 20px;
  }
}

CodePen：https://codepen.io/anon/pen/opZxzo

更改相对定位时悬停过渡不起作用？

1 个答案: