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

Posted 2023-05-09

【中文标题】jQuery .css background-position-x 在悬停时更改在 IE 中不起作用

【英文标题】：jQuery .css background-position-x change on hover not working in IE

【发布时间】：2012-03-07 09:38:04

【问题描述】：

所以，我有一个顶部带有标签的网站，并且标签会在悬停时更改为“弹出”。为了实现这一点，我为选项卡使用了 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

谢谢

【问题讨论】：

我刚刚在 IE9 中尝试过，它的工作方式似乎与 Firefox 完全一样——它们会弹出，但什么也没有消失？ （顺便说一句，设计不错）

【参考方案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 时可以看到这种情况。

【讨论】：

感谢 Zen 指出这一点。这让我重新审视了 jQuery，结果发现我的语法有点错误。 - 区别只是“）；在每行的末尾需要是）”）；代码在其他浏览器上运行的事实具有误导性！

【参考方案2】：

这就是问题所在。真正简单的一个，其中一个你从一行代码中错过了一个字符并且它搞砸了。

这是修复（我应用到每一行代码）

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

只是缺少一个右括号，在使用 .css 选择器设置背景图像的每一行末尾的 "); 之前。基本上，定义图像 url 的右括号丢失了。该代码在其他浏览器中运行良好，因此我认为它没有任何问题，尽管在意识到括号之前我确实尝试了各种其他事情！