悬停转换不起作用

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

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

顺便说一下 - 除非悬停时转换发生变化,您只能在元素上设置它们,不需要再次将它们包含在悬停状态中.

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>