悬停转换不起作用

Question

我有一个登录＆＃34;按钮＆＃34;，当悬停时，登录表单应该可见。它应该从按钮扩展。

它在悬停时工作正常，但当鼠标离开按钮（悬停）时，转换不起作用。

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

这是一个简化的问题：

https://jsfiddle.net/ze7qpx02/

谢谢！

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

btw - 除非悬停时转换发生变化，您只能在元素上设置它们，不需要再将它们包含在悬停状态。

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>

Answer 2

实际上过渡是有效的。你的问题是边界突然丢失了。因此，请将其复制到.child，您将看到它正常运行;

   border-style: solid;
   border-width: thin;
   border-top-style: none;

Answer 3

过渡有效，但你不能看到＆＃39;这是因为.child没有设置border默认样式。边框仅在父级悬停时。所以，当你“徘徊”时，边界立即消失。

因此，您应将边框设置为默认样式（如果需要，则为透明），然后在悬停时为该边框设置颜色。此外，不必在默认和悬停状态下使用转换。 （如果它们是相同的）。仅在默认样式上使用它们，因此它们将适用于两种状态。

请参阅下面的代码段

＆＃13;

＆＃13;

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: 0px;
  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;
  border-style: solid;
  border-width: thin;
  border-top-style: none;
  border-color: transparent;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

Its working Try this....

＆＃13;

＆＃13;

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;
    border-style: solid;
   border-width: thin;
   
    -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;
    
 
    -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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;