jQuery .css background-position-x在悬停时无法在IE中工作

因此，我有一个带有顶部标签的网站，并且标签在悬停时更改为“弹出”。为了达到这个目的，我使用了一个CSS标签，并使用jQuery将悬停时的背景位置更改为精灵上适当的y位置。jQuery .css background-position-x在悬停时无法在IE中工作

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

感谢

来源

2012-02-16 MatthewRead

我刚刚在IE9中试过它，它看起来和Firefox完全一样 - 它们弹出并没有消失？（顺便说一句，好的设计） – akiller 2012-02-16 00:19:20

在ie7,8,9 – shaunsantacruz 2012-02-16 00:20:59

你有一个内嵌的背景CSS样式（背景：0像素0像素;）在您的div id为“标签”，即覆盖从下面的类的背景风格：

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

我可以检查通过IE浏览器的开发者工具的CSS时看到此发生的历史。

来源

2012-02-16 01:01:54

中工作感谢您指出了禅......这让我再次看看jQuery，结果我的语法有点不对。 - 区别仅仅是“）;每行的末尾都需要）”）;代码在其他浏览器上运行的事实是误导性的！ – MatthewRead 2012-02-16 12:28:11

这是问题所在。真正简单的一个，其中一个从字面上错过了一行代码中的一个字符，并且它变得混乱起来。

这里的修复（即我施加到每一行代码）

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

所有它是，是一种缺少右支架，");之前在其中所使用的的CSS选择器设置每条线的端部背景图像。基本上图像的url被定义的左括号缺失。该代码在其他浏览器中运行良好，所以我认为它没有任何问题，尽管在实现支架之前我尝试了各种各样的其他事情！

来源

2012-02-16 12:33:48 MatthewRead

jQuery .css background-position-x在悬停时无法在IE中工作

回答

相关问题