使用伪元素实现hover动态效果。
以下是通过控制伪元素的背景来实现一个图片从右边向左边进入,看懂了就很容易明白。
欢迎交流
.nav {
//line-height: @navbar_height;
li{
margin-left: 20px;
width: 128px;
height: 46px;
text-align: center;
position: relative;
&:before{
width: 128px;
height: 46px;
content:"";
position: absolute;
top:0;
left:0;
background-image: url(../../assets/images/navbarBg.png);
background-size: cover;
background-position: 80px;
background-repeat: no-repeat;
transition: all .4s linear;
opacity: 0;
z-index: -1;
}
a {
text-align: center;
padding: 0 25px 10px 2px;
border-bottom: 5px solid transparent;
font-size: @nav_font_size;
color: @font_base_color_dark;
line-height: 46px;
opacity: 1;
}
&:hover::before{
background-position: 0;
opacity: 1;
}
&:hover a {
color: #fff;
}
.active0 {
border-bottom: 3px solid @font_base_color;
//color:@nav_hover;
}
}
}