CSS鼠标经过链接切换背景图片实例代码
分类：实例代码
很多导航栏都有这样的效果，当鼠标滑过的时候能够实现背景图片的切换，算是一个比较好的效果吧，也算是对导航栏最基本的美化了。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
ul li{
list-style:none;
width:150px;
height:30px;
line-height:30px;
text-align:center;
float:left;
margin-left:5px;
}
ul li a{
display:block;
width:150px;
height:30px;
text-decoration:none;
background:blue;
}
ul li a:hover{background:red}
</style>
</head>
<body>
<ul>
<li><a href="#">前端教程网一</a></li>
<li><a href="#">前端教程网二</a></li>
<li><a href="#">前端教程网三</a></li>
<li><a href="#">前端教程网四</a></li>
</ul>
</body>
</html>
为了便于演示，背景图片用背景色替代了，在实际应用中只要把背景色替换为背景颜色就可以了。
原理非常的简单，主要是用到了链接伪类，具体可以参阅CSS伪类选择符E:hover一章节。
CSS鼠标经过链接切换背景图片实例代码，这样的场景在实际项目中还是用的比较多的，关于CSS鼠标经过链接切换背景图片实例代码就介绍到这了。
CSS鼠标经过链接切换背景图片实例代码属于前端实例代码，有关更多实例代码大家可以查看。