鼠标經過導航變換背景，隻用一(yī)張圖片進行移位顯示

當鼠标移到超鏈接上時，更換背景，本功能隻需要一(yī)張背景圖片（daohang.jpg）。
需要注意是：該圖片爲一(yī)張同時具有原背景與要變換的背景，原背景在上，要變換的背景緊接着在原背景之下(xià)，高度自已調整。
原理：将導航外(wài)的div設爲原背景，高度爲原背景的高度，原超鏈接默認無背景，當鼠标移到超鏈接上時，将該背景圖片動态賦予超鏈接，并且将位置向上移動原背景的高度，即顯示了原背景下(xià)面要變換的背景了。
<style type="text/css">
      .top_daohang{ clear:both; width:100%; height:24px; line-height:24px; background: url(daohang.jpg) top left no-repeat; margin:0; padding:0px; white-space:nowrap; display:block; }
      .daohang_active{ background-image: url(daohang.jpg); background-repeat: no-repeat;}
      .top_daohang a{ float:left; color:#666; height:24px; list-style:none; display:inline; margin:0; padding:0px; color:#000; font-size:12px; font-weight:bold; text-decoration:none; text-align:center;}
      .top_daohang a:hover{ text-decoration:none; background-image: url(daohang.jpg); background-repeat: no-repeat;}
      .top_daohang a:visited{ color:#666;}
      .top_daohang .top_daohang_item_over1 { width:70px; background-position: -55px -26px; margin-left:55px; color:#666;}
      .top_daohang .top_daohang_item_over2 { width:100px; background-position: -125px -26px; color:#666;}
      .top_daohang .top_daohang_item_over3 { width:105px; background-position: -225px -26px; color:#666;}
</style>
<div class="top_daohang">
      <a href="20170711122112.html" class="top_daohang_item_over1 daohang_active">導航一(yī)</a>
      <a href="20170711122112.html" class="top_daohang_item_over2">導航二</a>
      <a href="20170711122112.html" class="top_daohang_item_over3">導航三</a>
</div>