javascript - ホバー時およびアクティブ時に div の背景位置を変更する

Question

以下にHTMLとCSSを示します。

私は内側に を持っdivています。spanすべてがデフォルトのホームの下に並んでいます。

マウスを上About(id=Hover2)に移動するdiv (id=divHolder)と、以下にリストされている正しい背景位置に移動します。また、 をクリックするとAbout.

その div の正しい背景位置がアクティブです。

ありがとう！

HTML:

<div id="nav">
    <div id="divHolder">
        <span id="highlight"></span>
    </div>
    <ul class="clearfix">
        <li><a id="Hover1" href="Default.aspx">Home</a> </li>
        <li><a id="Hover2" href="About.aspx">About</a> </li>
        <li><a id="Hover3" href="">Profile</a> </li>
        <li><a id="Hover4" href="">News</a> </li>
        <li><a id="Hover5" href="">Contact</a> </li>
    </ul>
</div>

CSS:

  #divHolder {
    height: 62px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 17px;
    width: 505px;

  }
 #highlight {
    background: url("/Styles/background-highlight.png") repeat scroll 0 0 transparent;
    display: block;
    height: 62px;
    left: 0;
    position: absolute;
    top: 0;
    width: 124px;
 }

  #divHolder.Hover1 {background-position:0px 0px} 
  #divHolder.Hover2 {background-position:0px 80px}
  #divHolder.Hover3 {background-position:0px 160px}
  #divHolder.Hover4 {background-position:0px 240px}
  #divHolder.Hover5 {background-position:0px 320px}