Question

我有 HTML ＆amp;下面是 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;}

让div在Hover和Active时更改背景位置

2 个答案: