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

【问题标题】：Have div change background postion on Hover and while Active让 div 在 Hover 和 Active 时更改背景位置
【发布时间】：2013-08-21 15:02:45
【问题描述】：

下面有我的 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}

【问题讨论】：

标签： javascript jquery asp.net css

【解决方案1】：

我在这里为你工作：

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;}

【讨论】：

这行得通，我只是将背景位置的高度和宽度向后。现在我只需要找出对齐方式，因为图片与 li 不匹配，谢谢！
所以这将在悬停时添加类，但是当链接处于活动状态时如何以同样的方式添加类？

【解决方案2】：

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

  $('#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
});

【讨论】：