如何在悬停元素期间制作拉起效果？只看一次这段代码

Question

我正在尝试创建一种效果，当 div class="container" 悬停时，另一个 div 从底部开始。只有在悬停期间，才会发生这种情况，因为我希望 .bottom div 被隐藏。当那个 div 没有隐藏的时候，我可以看到我想要的效果。但是由于我把底部隐藏了div，那个悬停效果平滑过渡效果是看不到的。检查此代码一次。

HTML CODE
<div class="box">
 Hello
  <div class="bottom">
    Everyone
  </div>
</div>

CSS code
.box{
  border: 1px solid black;
  display: inline-block;
  border-radius: 3px;
  padding: 8px;
  font-size: 20px;
}
.bottom {
  background: pink;
  width: 80px;
  text-align: center;
  position: absolute;
  top:80px;
  left:0;
 /* display: none; */
 
  
}
.box:hover .bottom {
  display: block;
  transition: linear 0.2s;
  top:55px; 
}

这是代码笔link https://codepen.io/Biebk/pen/MWpREqb

Answer 1

使用以下代码。

.box {
  border: 1px solid black;
  display: inline-block;
  border-radius: 3px;
  padding: 8px;
  font-size: 20px;
}
.hovered{
  transition: all .2s;
}
.bottom {
  background: pink;
  width: 80px;
  text-align: center;
  position: absolute;
  top: 80px;
  left: 0;
  visibility: hidden;
}

.hovered:hover+.bottom {
   transition: all .2s;
  top: 55px;
  visibility: visible;
}

<div class="box">
  <div class="hovered">Hello</div>
  <div class="bottom">
    Everyone
  </div>
</div>

Answer 2

首先，您可以将其 opacity 设置为 0，而不是 display: none 来完全隐藏传入元素，然后当父项悬停时，将其设置为 1，像这样：

.bottom {
  opacity: 0;
}
.box:hover .bottom {
  opacity: 1;
}

我想假设您希望在悬停时有传入的“上拉”效果，您希望该元素在悬停结束时也“下拉”。您可以通过在父元素上使用 :not(:hover) 来反转相同的效果：

.box:not(:hover) .bottom {
  opacity: 0;
}

此外，请务必将 transition 设置为非悬停状态。以下示例提供了您正在寻找的平滑过渡：

.box {
  border: 1px solid black;
  display: inline-block;
  border-radius: 3px;
  padding: 8px;
  font-size: 20px;
}

.bottom {
  background: pink;
  width: 80px;
  text-align: center;
  position: absolute;
  left: 0;
  transition: all .25s ease;
}

.box:not(:hover) .bottom {
  top: 80px;
  opacity: 0;
}

.box:hover .bottom {
  top: 55px;
  opacity: 1;
}

<div class="box">
 Hello
  <div class="bottom">
    Everyone
  </div>
</div>

第二种方法是将 bottom div 作为 box 的同级放置，并使用 adjacent sibling combinator 应用悬停效果：

.box {
  border: 1px solid black;
  display: inline-block;
  border-radius: 3px;
  padding: 8px;
  font-size: 20px;
}

.bottom {
  font-size: 20px;
  background: pink;
  width: 80px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 80px;
  opacity: 0;
  cursor: default;
  transition: all .25s ease;
}

.box:hover + .bottom {
  top: 55px;
  opacity: 1;
}

<div class="box">
 Hello
</div>
<div class="bottom">
  Everyone
</div>

Answer 3

使用opacity 属性而不是显示来达到想要的效果，然后使用以下代码

.box {
  border: 1px solid black;
  display: inline-block;
  border-radius: 3px;
  padding: 8px;
  font-size: 20px;
}

.bottom {
  background: pink;
  width: 80px;
  text-align: center;
  position: absolute;
  top: 80px;
  left: 0;
  opacity: 0;
  
}

.box:hover .bottom{
  opacity: 1;
  transition: opacity 0.2s , top 1s;
  top: 55px;
}

如何在悬停元素期间制作拉起效果？只看一次这段代码

How to make pull up effect during hovering element? Just see this code once

html

css

hover