悬停时的jQuery .css background-position-x更改在IE中不起作用

Question

因此，我有一个网站的顶部带有选项卡，并且这些选项卡在悬停时更改为“弹出”。 为了实现这一点，我对选项卡使用了CSS Sprite，并使用jQuery将鼠标悬停时的背景位置更改为Sprite上的适当y位置。

HTML：

    <div id="tabs">
    <div id="tabs_bg" class="pngfix"></div>
    <a id="tabs_home" href="<?php echo $base; ?>/" style="width:67px;height:23px;top:17px;"></a>
    <a id="tabs_mission" href="<?php echo $base; ?>/mission/" style="width:73px;height:23px;top:17px;left:150px;"></a>
    <a id="tabs_style" href="<?php echo $base; ?>/style/" style="width:60px;height:23px;top:17px;left:226px;"></a>
    <a id="tabs_personality" href="<?php echo $base; ?>/personality/" style="width:108px;height:26px;top:14px;left:286px;"></a>
    <a id="tabs_projects" href="<?php echo $base; ?>/projects/" style="width:70px;height:26px;top:14px;left:396px;"></a>
    <a id="tabs_blog" href="/blog/" style="width:60px;height:36px;top:4px;left:466px;"></a>
    <a id="tabs_contact" href="<?php echo $base; ?>/contact/" style="width:73px;height:26px;top:14px;left:526px;"></a>
</div>

jQuery的：

<script>
<!--MISSION TAB HOVER FUNCTION-->
$("#tabs_mission").hover(
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px -46px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px 0px");
  }  
);

<!--HOME TAB HOVER FUNCTION-->
$("#tabs_home").hover(
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px -92px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px 0px");
  }  
);

<!--PERSONALITY TAB HOVER FUNCTION-->
$("#tabs_personality").hover(
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px -138px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px 0px");
  }  
);

<!--PROJECTS TAB HOVER FUNCTION-->
$("#tabs_projects").hover(
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px -184px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px 0px");
  }  
);

<!--BLOG TAB HOVER FUNCTION-->
$("#tabs_blog").hover(
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px -230px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px 0px");
  }  
);

<!--CONTACT TAB HOVER FUNCTION-->
$("#tabs_contact").hover(
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px -276px");
  },
  function () {
    $('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png");
    $('#tabs').css("background-position", "0px 0px");
  }  
);
</script>

所有这些都可以在除IE之外的所有浏览器中完美运行。 我已经在IE的所有版本中对其进行了测试，但没有一个可以使用。 当您将鼠标悬停在IE中的任何选项卡上时，这些选项卡只会消失，就像背景图像已被删除一样。

这是我正在实施的网站-http: //www.thatsbrave.co.uk

谢谢

Answer 1

您的div上具有ID为“ tabs”的内联背景CSS样式（background：0px 0px;），该样式将覆盖以下类的背景样式：

.book_inner_home #tabs
{
    display : block;
    background : url(../img/tabs/home_tabs.png) no-repeat;
}

通过IE开发人员工具检查CSS时，我可以看到这种情况。

Answer 2

这是问题所在。 真正简单的代码，其中之一就是您从一行代码中确实遗漏了一个字符并将其弄乱了。

这是修复程序（我将其应用于每一行代码）

$('#tabs').css("background", "url(../../../core/img/tabs/style_tabs.png)");

它只是在");之前缺少了一个右括号");在使用.css选择器设置背景图像的每一行的末尾。基本上，缺少定义图像URL的右括号。代码在其他浏览器上也能正常工作，所以我认为这没什么问题，尽管在意识到这一点之前我确实尝试了各种其他事情！