我有一个登录"按钮",当悬停时,登录表格应该可见.它应该从按钮扩展.
它在悬停时工作正常,但当鼠标离开按钮(悬停)时,转换不起作用.
希望很清楚,我想要实现的目标.
这是一个简化的问题:
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: …