css实现鼠标经过导航颜色变换效果

css实现鼠标经过导航颜色变换效果，如下图：

1、先准备两张图片分别为：nav.jpg、hover.jpg，放到images文件夹里面。

2、准备一个index.html文档，该文档跟images评级，如下图：

index.html的html代码

        <div class="nv">
            <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>

index.html的css代码

        <style type="text/css">
            *{margin:0px; padding:0px;}
            html{background:#ffffff; font-size:12px; font-family:"宋体"; text-decoration:none;}
            body{margin:auto; padding:auto;}
            ul{list-style-type:none;}
            .nv{width:400px; height:30px; margin:auto; padding:auto; background:url(images/nav.jpg)}
            .nv li{float:left; width:80px; height:30px; line-height:30px; text-align:center;}
            .nv a{font-size:14px; color:#fff; text-decoration:none; width:80px; height:30px; display:block;}
            .nv a:hover{background:url(images/hover.jpg); color:#000000;}
        </style>