css鼠标悬停下划线
在今天的教程中,我们将使用一些CSS和JavaScript来创建精美的菜单悬停效果。 这不是复杂的最终结果,但是构建它将是练习我们的前端技能的绝好机会。
在不做进一步介绍的情况下,让我们检查一下要构建的内容:
标记
我们从一些非常基本的标记开始; 包含菜单的nav
元素和一个空的span
元素:
<nav class="mynav">
<ul>
<li>
<a href="">Home</a>
</li>
<li>
<a href="">About</a>
</li>
<li>
<a href="">Company</a>
</li>
<li>
<a href="">Work</a>
</li>
<li>
<a href="">Clients</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
</nav>
<span class="target"></span>
CSS
准备好标记后,接下来我们为相关元素指定一些基本样式:
.mynav ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
list-style-type: none;
padding: 0;
}
.mynav li:not(:last-child) {
margin-right: 20px;
}
.mynav a {
display: block;
font-size: 20px;
color: black;
text-decoration: none;
padding: 7px 15px;
}
.target {
position: absolute;
border-bottom: 4px solid transparent;
z-index: -1;
transform: translateX(-60px);
}
.mynav a,
.target {
transition: all .35s ease-in-out;
}