下划线 动画

Posted 2020-09-21

<ul class="ddd">
<li class="solid active">啦啦啦啦</li>
<li class="solid">我哦我我</li>
<li class="solid">哦哦哦哦</li>
<li class="solid">噢噢噢噢</li>
<li class="solid">雅黑雅黑</li>
</ul>

 

使用伪类 css

<style>
.solid {
margin-top: 200px;
margin-left: 100px;
text-align: center;
width: 100px;
height: 50px;
position: relative;
float: left;

}
.solid:after {
content: ‘‘;
position: absolute;
left: 50%;
bottom: 15px;
margin-left: 0%;
width: 0%;
height: 2px;
background-color: #FF3401;
transition: all 0.3s ease-in-out;
}
.solid:hover:after {
width: 100%;
margin-left: -50%;
background-color: #FF3401;

}
.solid.active:after,
.solid:hover:after {
width: 100%;
margin-left: -50%;
}
.solid.active.dis:after{
width: 0%;
margin-left: 0%;
}
</style>

初始化 第一个

<script>

$(".ddd .solid").hover( function(event){

$(".solid.active").addClass(‘dis‘);

}, function(event){

$(".solid.active").removeClass(‘dis‘);

} );

</script>