导航列表项悬停和焦点效果
使用CSS变换为导航项创建自定义的悬停和焦点效果。
- 使用
::before
伪元素在列表项锚点上创建悬停效果。使用transform: scale(0)
隐藏它。 - 使用
:hover
和:focus
伪类选择器将伪元素过渡到transform: scale(1)
并显示其彩色背景。 - 使用
z-index
防止伪元素覆盖锚点元素。
<nav class="hover-nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
.hover-nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.hover-nav li {
float: left;
}
.hover-nav li a {
position: relative;
display: block;
color: #fff;
text-align: center;
padding: 8px 12px;
text-decoration: none;
z-index: 0;
}
li a::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
bottom: 0;
left: 0;
background-color: #2683f6;
z-index: -1;
transform: scale(0);
transition: transform 0.5s ease-in-out;
}
li a:hover::before,
li a:focus::before {
transform: scale(1);
}