这是我刚学CSS的时候一个热心教我的方法,我并不认识他,不过却让我很感动
代码很简单,不多说了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
font-family:"Helvetica";
}
.nav{
display:inline-block;
position:relative;
width:80px;
text-align:center;
line-height:40px;
height:40px;
}
.nav::after{
position:absolute;
content:"";
display:block;
width:100%;
height:2px;
background-color:black;
left:0;
bottom:0;
transform:scaleX(0);
visibility:hidden; 初始的时候不显示 X变形为0长度
transition:all 0.4s;
}
.nav-active{
}
.nav-active::after{
position:absolute;
content:"";
display:block;
width:100%;
height:2px;
background-color:black;
left:0;
bottom:0;
transform:scaleX(1); 显示并过度
visibility:visible;
transition:all 0.4;
}
</style>
<script src="../jquery-3.1.0.min.js"></script>
</head>
<body>
<div>
<div class="nav">
HOME
</div>
<div class="nav">
PRODUCT
</div>
<div class="nav">
NEWS
</div>
<div class="nav">
CONTACT
</div>
</div>
<script>
$(".nav").mouseover(function(){
$(this).addClass("nav-active");
});
$(".nav").mouseout(function(){
$(this).removeClass("nav-active");
});
</script>
</body>
</html>