关于 transition 是放在a 上还是放在a:hover上
如果transition 加上a 上, 鼠标悬浮a:hover上有正向过渡效果,鼠标离开a:hover时,有反向过渡效果。
如果transition 加在a:hover上,鼠标悬浮时,有正向效果,离开时没有反向效果。
a和a:hover上都加上 transition 也是可以的。
// html
<li>
<a href="">1</a>
<a href="">1</a>
</li>
// css (less)
a{
width:100px;
height:20x;
display:block;
&:after{
content: '';
display: block;
position: absolute;
left:50%; right:50%;
bottom:0; height: 4px;
opacity: 0;
background-color: @mainCL-3;
transition: all 0.5s ease 0s;
}
&:hover:after{
left: 1%;right: 1%;
opacity: 1;
}
}