我一直试图在我的页面中的某些按钮悬停时执行动画。我写了下面的CSS来实现这个目标:
#B1 {
margin: 50px;
margin-top: 50px;
margin-bottom: 50px;
flex: 1 1 auto;
padding: 20px;
border: 2px solid #f7f7f7;
text-align: center;
text-transform: uppercase;
position: relative;
overflow:hidden;
transition: .3s;
&:after {
position: absolute;
transition: .3s;
content: '';
width: 0;
left: 50%;
bottom: 0;
height: 3px;
background: #f7f7f7;
}
}
动画应该在位于页面底部黑色div的按钮底部加载一个小条,但是,我的动画不起作用。是什么导致了这个问题?
答案 0 :(得分:0)
当您将鼠标悬停在元素上时,您需要提供宽度来显示条形。
使用下面的css来获得所需的结果。
(append-to-file "here I come to save the day\n" nil (getenv "MY_TTY"))
答案 1 :(得分:0)
鼠标悬停后您没有设置条形样式值。
当您将鼠标悬停在按钮上时,按钮中的条形宽度将更改为100%。
请在{width:100%;} "在#B1和#B2
Codepen:http://codepen.io/onyoon7/pen/rjNaov
#B1 {
margin: 50px;
margin-top: 50px;
margin-bottom: 50px;
flex: 1 1 auto;
padding: 20px;
border: 2px solid #f7f7f7;
text-align: center;
text-transform: uppercase;
position: relative;
overflow:hidden;
transition: .3s;
&:after {
position: absolute;
transition: .3s;
content: '';
width: 0;
left: 0;
bottom: 0;
height: 3px;
background: #f7f7f7;
}
&:hover:after {
width: 100%;
}
}
#B2 {
margin: 50px;
flex: 1 1 auto;
padding: 20px;
border: 2px solid #f7f7f7;
text-align: center;
text-transform: uppercase;
position: relative;
overflow:hidden;
transition: .3s;
&:after {
position: absolute;
transition: .3s;
content: '';
width: 0;
left: 0;
bottom: 0;
height: 3px;
background: #f7f7f7;
}
&:hover:after {
width: 100%;
}
}