鼠标悬浮导航栏背景和字体变色效果
分类：实例代码
鼠标悬浮导航栏背景和字体变色效果属于前端实例代码，有关更多实例代码大家可以查看。
网站一般都会对导航栏下一些功夫，无论从功能还是外观一般都会进行精心的设计。
本章节介绍一个最简单的导航栏效果，就是鼠标悬浮的时候，能够使导航栏的背景变色。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#navigation{
width:200px;
font-family:Arial;
}
#navigation ul{
list-style-type:none;
margin:0px;
padding:0px;
text-decoration:none;
}
#navigation li{
border-bottom:1px solid #ED9F9F;
}
#navigation li a{
display:block;
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515;
border-right:1px solid #711515;
}
#navigation li a:link, #navigation li a:visited {
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover{
background-color:#990020;
color:#ffff00;
}
</style>
</head>
<body>
<div id="navigation">
<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>
</ul>
</div>
</body>
</html>
以上代码实现了我们的要求，代码也比较简单，下面介绍一下它的实现过程，因为对初学者可能会有难度。
一.实现原理:
原理就是利用的链接伪类选择器设置链接a元素的背景和字体颜色。
链接伪类选择器可以参阅CSS E:visited链接伪类选择器一章节 。
#navigation ul{
list-style-type:none;
margin:0px;
padding:0px;
}
list-style-type:none删除列表默认的序列标志。
#navigation li a{
display:block;
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515;
border-right:1px solid #711515;
}
display:block将链接a设置为块级元素，这样就可以设置padding了，否则可能会出问题。
em单位可以参阅CSS的长度单位em一章节。
text-decoration:none删除链接默认的下划线。
鼠标悬浮导航栏背景和字体变色效果，这样的场景在实际项目中还是用的比较多的，关于鼠标悬浮导航栏背景和字体变色效果就介绍到这了。