本文主要介绍a hover属性的用法，由此扩展出两种常见的链接效果，为链接增加背景色和背景图片，大大改观链接美观度，特别是第二种方法，鼠标经过链接时，增加背景图片，可在此基础上继续完善，形成一个漂亮的网页菜单，下面来看整个实例的代码：
用到了一张图片：
，右键图片另存为。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS改变背景色，为链接增加hover时的背景图片</title>
<style>
.abc a{ color:#000}/*超链接颜色：黑色 */
.abc a:hover{color:#FFF; background:#00F}
/*鼠标经过悬停超链接时字体颜色为白色，背景为蓝色*/
.def a{ color:#000; padding:10px 10px; line-height:30px}/*超链接颜色为黑色 */
.def a:hover{color:#FFF; background:url(http://www.codefans.net/article/upload/201310/102848.gif) no-repeat center}
/*鼠标经过悬停超链接时字体颜色为白色，背景为图片*/
#n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;}
#n a{ padding:0 4px; color:#333}
</style>
</head>
<body>
<p><strong>鼠标经过文字链接背景变为有颜色背景</a>效果如下：</p>
<p><div class="abc"><a href="/">HTML5</a>
</div></p>
<p> </p>
<p><strong>鼠标经过文字链接背景变为图片</a>效果如下：</p>
<p>
<div class="def"><a href="/">HTML5</a>
</div></p>
</body>
</html>运行环境：IE6+及以上，火狐、chrome、Safari、Opera等。
