<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>