網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>菜單導(dǎo)航特效代碼>

圖片交換技術(shù)制作CSS鼠標(biāo)懸停菜單_菜單導(dǎo)航特效

這是一個(gè)使用了圖片交換技術(shù)制作的CSS鼠標(biāo)懸停菜單，也就是大家所說的鼠標(biāo)經(jīng)過換色，不過本例中的菜單并沒有使用純CSS來實(shí)現(xiàn)背景換色，這里將用一幅圖片替換了背景色，因?yàn)橹饕窍胱尨蠹伊私釩SS對(duì)背景圖片控制的技巧，實(shí)際上，這里的圖片在正常使用時(shí)完全可以用CSS代碼來定義。

<html>
<head>
<title>使用圖片交換技術(shù)制作CSS鼠標(biāo)懸停菜單</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>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2011-02-24

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

欧美三区四区_av先锋影音资源站_亚洲第一论坛sis_影音先锋2020色资源网_亚洲精品社区_在线免费观看av网站_国产一区二区伦理_亚洲欧美视频一区二区_99视频精品全部免费在线_精精国产xxxx视频在线

圖片交換技術(shù)制作CSS鼠標(biāo)懸停菜單_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些