码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-11-12 11:29:53      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

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>
View Code

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>
View Code

 

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

标签:

原文地址:http://www.cnblogs.com/ityz/p/4958083.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!