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}

Answer 1

只要确保您实际上可以悬停该元素。使用您的代码，看起来跨度涵盖了一些阻止悬停的链接。

  $('#Hover2').hover(
    function(){
      $('#divHolder').addClass('Hover2');
    }, 
    function(){
      $('#divHolder').removeClass('Hover2');
    }
  );

$('#Hover2').on('click', function(){
    $('#divHolder').addClass('Hover2');//or whatever you want to do on click
});

Answer 2

我在这里为你工作：

http://jsfiddle.net/xgkHH/

这是我必须使用的 jQuery：

$("#nav li").on("mouseenter",function() {
    classtoadd = $(this).children("a").attr("id");
    $("#highlight").addClass(classtoadd);
});
$("#nav li").on("mouseleave",function() {
    // remove all classes.
    $("#highlight").removeClass();
});

我根本不需要更改您的 HTML，但这是我对您的 CSS 所做的：

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