【前端】html+css实现鼠标悬浮变色导航栏【HTML+CSS+JavaScript(JS)】

效果：

在这里插入图片描述

代码：

html文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业1</title>
		<link rel="stylesheet" href="zuoye1.css"/>
	</head>
	<body>
		<div class="box">
			<div class="top">
				<span>
					<div><a href="" class="top-a">首页</a></div>
					<div><a href="" class="top-a">产品列表</a></div>
					<div><a href="" class="top-a">关于我们</a></div>
					<div><a href="" class="top-a">成功案例</a></div>
					<div><a href="" class="top-a">联系我们</a></div>
				</span>
				
			</div>
			
			<div class="middle">
				<a href="" class="middle-a">首页</a>
				&gt;&gt;
				<a href="" class="middle-a">产品首页</a>
			</div>
			
			<div class="bottom">
				
			</div>
			
		</div>
	</body>
</html>

css外部样式表：

*{margin: 0px; padding: 0px; border: 1px;}

.box{/* 最外部盒子 */
	width: 100%;
}

span div{
	display: inline-block;
}

span div:hover{
	background-color: #A3F178;
}

.top{
	background-color: #eee;
	width: 80%;
	height: 40px;
	margin: auto;
	margin-top: 50px;
	text-align: center;
	line-height: 40px;/* 让div中内容垂直居中 */
}

.top a{
	margin-left: 25px;
	margin-right: 25px;
}
a:hover{
	background-color: #a3f178;
}

.middle{
	margin-top: 30px;
	margin-bottom: 30px;
	border: 1px solid #000;
	width: 165px;
}

.bottom{
	width: 805px;
	height: 425px;
	background: url(zuoye1.PNG) repeat;/* 忘了 */
}

.top a,.middle a{
	text-decoration: none;
	color: brown;
}
a:hover{
	
	background-color: #A3F178;
}