圖片交換技術制作CSS鼠標懸停菜單_菜單導航特效

這是一個使用了圖片交換技術制作的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訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些