图片交换技术制作CSS鼠标悬停菜单_菜单导航特效

缂備礁娲﹂埅绀慹deCMS閻熸瑥妫濋。鍫曞极濞嗘垟鏌�濞戞梹澹嗛埞鏍⒒閿燂拷缂佸鍠愬﹢鍥礉閳ヨ櫕鐝� 闂侇偄顦辩紞澶屾兜閺囨氨闉嶉柤杈ㄦ缁憋拷 闁哄啰濮撮崪鏍博濞嗘挻姣愮€规悶鍎遍崣锟�,闁谎勫劤鐎规娊寮堕崘顔兼濞戞挴鍋撻梺娆惧枛閸欏繘寮婚敓锟�!

这是一个使用了图片交换技术制作的CSS鼠标悬停菜单，也就是大家所说的鼠标经过换色，不过本例中的菜单并没有使用纯CSS来实现背景换色，这里将用一幅图片替换了背景色，因为主要是想让大家了解CSS对背景图片控制的技巧，实际上，这里的图片在正常使用时完全可以用CSS代码来定义。

<html>
<head>
<title>使用图片交换技术制作CSS鼠标悬停菜单</title>
<style type="text/css">
    div#spritemenu {
    	height: 50px;
      width: 400px;
      font-size: 9px;
      background-image: url(http://p1.mb5u.com/texiao/1/spritemenu.gif);
      overflow: hidden;
    }
div#spritemenu ul li {
      display: inline;
      margin: 0px;
      padding: 0px;
    }
div#spritemenu ul li a {
      display: block;
      position:relative;
      height: 50px;
    }
div#spritemenu ul li a:hover {
      background-image: url(http://p1.mb5u.com/texiao/1/spritemenu.gif);
    }
div#spritemenu ul {
      margin: 0px;
      padding: 0px;
      list-style-type:none;
      height: 50px;
    }
div#spritemenu span {
      display: none;
    }
    
div#spritemenu li.buttonA a {top: 0px; left: 0px; width: 80px; background-position: 0px 0px;}
div#spritemenu li.buttonB a {top: -50px; left: 82px; width: 64px; background-position: -82px 0px;}
div#spritemenu li.buttonC a {top: -100px; left: 148px; width: 76px; background-position: -148px 0px;}
div#spritemenu li.buttonD a {top: -150px; left: 226px; width: 70px; background-position: -226px 0px;}
div#spritemenu li.buttonE a {top: -200px; left: 298px; width: 102px; background-position: -298px 0px;}
div#spritemenu li.buttonA a:hover {background-position: 0px -50px;}
div#spritemenu li.buttonB a:hover {background-position: -82px -50px;}
div#spritemenu li.buttonC a:hover {background-position: -148px -50px;}
div#spritemenu li.buttonD a:hover {background-position: -226px -50px;}
div#spritemenu li.buttonE a:hover {background-position: -298px -50px;}
</style>
</head>
<body>
<div id="spritemenu">
  <ul>
  	<li class="buttonA"><a href="#"><span>Home</span></a></li>
  	<li class="buttonB"><a href="#"><span>About</span></a></li>
  	<li class="buttonC"><a href="#"><span>Contact</span></a></li>
  	<li class="buttonD"><a href="#"><span>Forum</span></a></li>
  	<li class="buttonE"><a href="#"><span>Guestbook</span></a></li>
  </ul>
</div>
</body>
</html>

所属频道：菜单导航特效/更新时间：2011-02-24

[收藏][报错][返回列表]

评论加载中....

图片交换技术制作CSS鼠标悬停菜单_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些

闁衡偓閹増顥�&闁告帒妫旈棅锟�