如何在悬停元素期间制作上拉效果？只需看一次此代码

问题描述

我试图在 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; 
}

这是codepen链接 https://codepen.io/Biebk/pen/MWpREqb

解决方法

使用以下代码。

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

首先，您可以将其 display: none 设置为 opacity，而不是 0 来完全隐藏传入元素，然后当父元素悬停时，将其设置为 {{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> div 作为 bottom 的兄弟，并使用 adjacent sibling combinator 来应用悬停效果：

box

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

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

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

hover html