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中工作

回答

相關問題