【5分钟代码练习】01—导航栏鼠标悬停效果的实现
web前端开发
共 2941字,需浏览 6分钟
· 2021-07-05
作者 | 杨小二
在列表项锚点处使用 :before 伪元素创建悬停效果,使用 transform: scale(0) 隐藏它。
使用 :hover 和 :focus 伪类选择器转换到 transform: scale(1) 并显示带有彩色背景的伪元素。
使用a:hover伪类对文字颜色进行设置。
使用 z-index 防止伪元素覆盖锚元素。
<nav class="hover-nav">
<ul>
<li><a href="http://www.webqdkf.com/">首页</a></li>
<li><a href="http://www.webqdkf.com/HTML/">HTML/CSS</a></li>
<li><a href="http://www.webqdkf.com/JS/">JavaScript</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: #222;
text-align: center;
padding: 8px 12px;
text-decoration: none;
z-index: 0;
}
.hover-nav li a:hover {
color: #fff;
}
li a:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
bottom: 0;
left: 0;
background-color: #1ab1cc;
z-index: -1;
transform: scale(0);
transition: transform 0.5s ease-in-out;
}
li a:hover:before,
li a:focus:before {
transform: scale(1);
}
完整代码如下:
<html>
<head>
<style type="text/css">
.hover-nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.hover-nav ul li {
float: left;
}
.hover-nav li a {
position: relative;
display: block;
color: #222;
text-align: center;
padding: 8px 12px;
text-decoration: none;
z-index: 0;
}
.hover-nav li a:hover {
color: #fff;
}
li a:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
bottom: 0;
left: 0;
background-color: #1ab1cc;
z-index: -1;
transform: scale(0);
transition: transform 0.5s ease-in-out;
}
li a:hover:before,
li a:focus:before {
transform: scale(1);
}
</style>
</head>
<body>
<nav class="hover-nav">
<ul>
<li><a href="http://www.webqdkf.com/">首页</a></li>
<li><a href="http://www.webqdkf.com/HTML/">HTML/CSS</a></li>
<li><a href="http://www.webqdkf.com/JS/">JavaScript</a></li>
</ul>
</nav>
</body>
</html>
写在最后
学习更多技能
请点击下方公众号
评论
DSTransparentNavigationBar导航栏透明效果
DSTransparentNavigationBar实现导航栏透明效果,可以自定义导航栏颜色。
DSTransparentNavigationBar导航栏透明效果
0
DSTransparentNavigationBar导航栏透明效果
DSTransparentNavigationBar 实现导航栏透明效果,可以自定义导航栏颜色。
DSTransparentNavigationBar导航栏透明效果
0
Android导航栏适配的实现
和你一起终身学 习,这里是程序员Android 经典好文推荐,通过阅读本文,您将收获以下知识点: 一、前言二、导航栏的处理三、 修改StatusHostLayout方案四、总结 一、前言 在之前的文章中,大家比较关注宿主侵入的方式...
程序员Android
0
HoverCSS3 的鼠标悬停效果和动画
CSS3的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮、LOGO以及图片等元素。所有这些效果都是只需要单一的标签,必要的时候使用before和after伪元素。因为使用了CSS3过渡、转换和动画
HoverCSS3 的鼠标悬停效果和动画
0