jQuery .css hoverでの背景位置の変更がIEで機能しない

Question

トップページにタブがあるウェブサイトがあり、「ポップアップ」して表示されるようにタブが変更されます。これを実現するために、タブにCSSスプライトを使用し、jQueryをスプライトの適切な位置に移動して、背景上の背景位置を変更しました。

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の任意のタブにカーソルを合わせると、あたかも背景イメージが削除されたかのようにタブが消えます。

これは私が上でこれを実装してるサイトです - あなたはインライン背景CSSスタイル（背景：0PXの0PX;）持ってhttp://www.thatsbrave.co.uk

おかげ

Answer 1

オーバーライドしているIDが「タブ」で、あなたのdivのを

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

IE開発ツールを使用してCSSをチェックすると、これが発生することがあります。

Answer 2

ここに問題がありました。実際のシンプルなもの、コード行から文字通り1文字が欠けている部分の1つ。ここ

フィックス（Iコードの各ラインに印加されること）

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

だったすべて、設定した.cssセレクタを使用する各ラインの終わりに");前に、欠落閉鎖ブラケットたです背景画像。基本的に画像のURLが定義されている閉じ括弧が欠けていました。コードは他のブラウザでうまくいきましたので、私はそこに何も間違っているとは思いませんでしたが、私はブラケットについて理解する前に、いろいろ試しましたが！