css相关知识

css悬停样式

点击查看代码

.nav-menu a {
position: relative;
margin-left: 30px;

color: #7A7A7A;

font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;

text-decoration: none;
}

.nav-menu a::after {
content: '';
position: absolute;
left: 2%;
top: 96%;
width: 100%;
height: 4px;
background: blue;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}

.nav-menu a:hover {
color: #7A7A7A;
}

.nav-menu a:hover::after {
transition: 0.3s;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}


.nav-menu #showActive {
color: #7A7A7A;
border-bottom: 4px solid blue;
transition: 0.3s;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}