html - 悬停过渡不起作用

Question

我有一个登录“按钮”，当悬停时，登录表单应该可见。它应该从按钮展开。

它在悬停时工作正常，但当鼠标离开按钮(悬停关闭)时，过渡不起作用。

希望清楚，我想要实现的目标。

这是一个简单的问题解决方案:

https://jsfiddle.net/ze7qpx02/

谢谢!

body{
  
  margin-left: 300px;
}



.parent {
  padding: 5px;
    border-width: thin;
    border-style: solid;
    font-size: 15px;
    position: relative;
    display: inline-block;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.parent:hover {
    border-bottom-color: transparent;
    padding-bottom: 30px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.child{
  position: absolute;
    height: 0px;
    width: 100%;
    bottom: 0;
    right: -1px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.parent:hover .child{
    height: calc(240px - 100%);
    bottom: calc(-240px + 100%);
    width: 240px;
    border-style: solid;
    border-width: thin;
    border-top-style: none;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

<div class="parent">
  Login
  <div class="child">
  </div>
</div>

Answer 1

由于仅当父项悬停时才向子项添加边框，因此当悬停结束时它会立即消失。您可以使用透明颜色为 child 添加边框，并在悬停时更改颜色。

顺便说一句 - 除非过渡在悬停时发生变化，否则您只能在元素上设置它们，无需在悬停状态下再次包含它们。

body {
  margin-left: 300px;
}

.parent {
  padding: 5px;
  border-width: thin;
  border-style: solid;
  font-size: 15px;
  position: relative;
  display: inline-block;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.parent:hover {
  border-bottom-color: transparent;
  padding-bottom: 30px;
}

.child {
  position: absolute;
  height: 0px;
  width: 100%;
  bottom: 0;
  right: -1px;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border: transparent solid thin;
  border-top-style: none;
}

.parent:hover .child {
  height: calc(240px - 100%);
  bottom: calc(-240px + 100%);
  width: 240px;
  border-color: black;
}

<div class="parent">
  Login
  <div class="child">
  </div>
</div>