主页 / 问题 / 697751
Accepted
Daniil Dubchenko
Asked:2020-07-26 04:08:42 +0000 UTC2020-07-26 04:08:42 +0000 UTC

是否可以为 ::before 设置转换

  • 772

::before元素的高度在悬停时平滑变化是必要的。transition不起作用。有没有办法让事情在没有 JS 的情况下工作？

.card1 {
  width: 239px;
  height: 360px;
  border-radius: 10px;
  border: 2px solid rgb(42, 42, 42);
  background-color: red;
  position: relative;
  cursor: pointer;
}

.card1::before {
  content: "";
  position: absolute;
  width: 239px;
  border-radius: 10px;
  background-color: green;
}

.card1:hover::before {
  height: 360px;
}
<div class="place">
  <div class="card1"></div>
</div>

html

1 个回答

  1. Best Answer

    您需要设置初始高度0px。

    .card1 {
  width: 239px;
  height: 360px;
  border-radius: 10px;
  border: 2px solid rgb(42, 42, 42);
  background-color: red;
  position: relative;
  cursor: pointer;
}

.card1::before {
  content: "";
  position: absolute;
  width: 239px;
  height: 0px;
  border-radius: 10px;
  background-color: green;
  transition: height 0.4s linear;
}

.card1:hover::before {
  height: 360px;
}
    <div class="place">
  <div class="card1"></div>
</div>

    • 3

相关问题