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

最新推荐文章于 2023-04-08 18:54:17 发布

weixin_30545285

最新推荐文章于 2023-04-08 18:54:17 发布

阅读量566

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ityz/p/4958083.html

本文介绍如何使用CSS实现鼠标悬停时导航栏背景颜色及图片的变化效果，通过设置不同的图片来改变导航项的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>