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

Question

所以，我有一个顶部带有标签的网站，并且标签会在悬停时更改为“弹出”。为了实现这一点，我为选项卡使用了 CSS 精灵，并使用 jQuery 将悬停时的背景位置更改为精灵上适当的 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 上有一个内联背景 css 样式 (background:0px 0px;)，其 id 为“tabs”，它覆盖了以下类的背景样式：

.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 的右括号丢失了。该代码在其他浏览器中运行良好，因此我认为它没有任何问题，尽管在意识到括号之前我确实尝试了各种其他事情！