顶部鼠标移动到导航上后导航背景颜色变为黑色该如何实现？
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html><html><head><meta charset="utf-8"><title>作业</title><link rel="stylesheet" href="css/indext.css"></head><body> <!-- 头部 --> <div class="header"> <!--logo制作--> <div class="logo"> <a href="#"><img src="images/logo.png"></a> </div> <!--导航制作--> <div class="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">FACULTY</a></li> <li><a href="#">EVENTS</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </div> <!-- 主体 --> <div class="main"></div> <!-- 底部 --> <div class="footer"></div></body></html> |
/* 清除网页两边的空白*/
*{
margin:0;
padding: 0;
}
/*头部的宽度，高度，背景颜色 实现滚动条滚动头部能随之一起转动*/
.header{
width: 100%;
height: 100px;
background-color: #07cbc9;
position: sticky;
top:0;
}
/*头部logo*/
.header .logo {
padding-left: 150px;
padding-top: 26px;
float: left;
}
.header .nav a {
text-decoration: none;
text-align: center;
color: #ffffff;
display: block;
}
.header .nav {
float: right;
}
.header .nav ul {
padding-right: 100px;
}
.header .nav ul li{
float: left;
font-size:15px;
font-weight: bold;
list-style: none;
width:80px;
height:100px;
line-height: 100px;
font-family: "Microsoft YaHei UI";
}
1
收起
正在回答
1回答
您好，如下，使用hover经过事件设置背景颜色。
1 2 3 | a:hover{ background-color: red;} |
如果解决了您的问题，请采纳。祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
PHP小白零基础入门
- 参与学习 人
- 提交作业 626 份
- 解答问题 4928 个
想要学好Web后端开发的中流砥柱语言，本阶段为你轻松铺就扎实的基础，从前端网页布局的搭建到后台PHP开发，助你从零基础到掌握主流开发语言。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧