导航栏点击可以跳转到对应链接，实现鼠标滑过每个模块变换颜色的效果有如下方法。
方法一：将<a>标签强制转换标签类型为块元素，然后设置：hover样式(鼠标滑过样式)
css样式：
<head>
<style>
/* 清除自带间距 */
*{
padding: 0;
margin: 0;
}
/* 清除列表自带列表符号 */
ul{
list-style: none;
}
li{
float: left;
background-color: black;
}
a{
padding: 0 20px;
height: 50px;
line-height: 50px;
/* 强制转换a标签为块元素 */
display: block;
color: white;
text-decoration: none;
}
a:hover{
background-color: pink;
}
</style>
</head>html内容：
<body>
<ul>
<li><a href="">首页</a></li>
<li><a href="">课程</a></li>
<li><a href="">云服务</a></li>
<li><a href="">双选会</a></li>
<li><a href="">共享</a></li>
<li><a href="">课堂</a></li>
<li><a href="">好程序员</a></li>
</ul>
</body>实现效果：
方法二：给<li>标签设置：hover样式(鼠标滑过样式)
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
li{
float: left;
padding: 0 20px;
background-color: black;
height: 50px;
line-height: 50px;
padding: 0 20px;
height: 50px;
line-height: 50px;
}
a{
color: white;
text-decoration: none;
}
li:hover{
background-color: pink;
}
</style>（这个做法需要把
height: line–height: padding: 等属性加给<li>标签）
<body>
<ul>
<li><a href="">首页</a></li>
<li><a href="">课程</a></li>
<li><a href="">云服务</a></li>
<li><a href="">双选会</a></li>
<li><a href="">共享</a></li>
<li><a href="">课堂</a></li>
<li><a href="">好程序员</a></li>
</ul>
</body>实现效果：
两种做法都可以实现滑过变换颜色的效果，但是一般使用方法一更加好，更加方便于用户操作使用，因为方法二如图所示，鼠标放置在区域内后就会变色，但是只有点击在文字上的时候才可以实现点击跳转操作。而方法一鼠标进入区域后即可点击跳转，更加方便实用，用户体验感更好。
原文地址:https://blog.csdn.net/m0_64054560/article/details/123994622
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_21396.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
