以下に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}