css鼠标悬浮切换图片鼠标离开又恢复默认
分类：实例代码
在实际应用中，经常会遇到这样的效果，那就是在默认状态下元素显示一张图片，当鼠标悬浮的时候又会显示另外的图片，当鼠标离开的时候又会恢复默认图片，下面通过代码实例介绍一下如何实现此效果。
代码如下:
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#link{
width:100px;
height:30px;
display:block;
overflow:hidden;
background:url(mytest/demo/default.jpg);
}
#link:hover{
background:url(mytest/demo/alt.jpg);
}
</style>
</head>
<body>
<a id="link"></a>
</body>
</html>
上面的代码实现了我们的要求，当鼠标悬浮的时候可以切换背景图片，鼠标离开又恢复默认，原理非常的简单，就是利用链接伪类实现此效果，这里不多介绍了，具体可以参阅CSS E:hover一章节。