jQuery懸停在Safari或Google Chrome中不起作用

我在某些列表項上實現了jQuery懸停效果。它適用於所有瀏覽器，除了Safari和Google Chrome（Mac和PC）。出於某種原因，懸停效果不適用於這兩種瀏覽器。jQuery懸停在Safari或Google Chrome中不起作用

下面的代碼（它也採用了color_library.js插件）：

$(document).ready(function(){ 
    var originalBG = $("#menu li#Q_01","#menu li#Q_03","#menu li#Q_05","#menu li#Q_07","#menu li#Q_09","#menu li#Q_11","#menu li#Q_11").css("background-color");  
    var originalBG1 = $("#menu li").css("color"); 
    var originalBG2 = $("#menu li#Q_02","#menu li#Q_04","#menu li#Q_06","#menu li#Q_08","#menu li#Q_10","#menu li#Q_12").css("background-color"); 

    var fadeColor = "#009FDD"; 
    var fadeColor1 = "#FFF"; 
    var fadeColor2 = "#623A10"; 

    $("#menu li#Q_01").hover(function() { 
    $(this).animate({ backgroundColor:fadeColor2,color:fadeColor1}, 380) 
    }, 
    function() { 
     $(this).animate({color:"#666",backgroundColor:"#fff"}, 380) 
    } 
); 

$("#menu li#Q_03").hover(function() { 
    $(this).animate({ backgroundColor:fadeColor2,color:fadeColor1}, 380) 
    }, 
    function() { 
    $(this).animate({color:"#666",backgroundColor:"#fff"}, 380) 
    } 
); 

$("#menu li#Q_05").hover(function() { 
    $(this).animate({ backgroundColor:fadeColor2,color:fadeColor1}, 380) 
    }, 
    function() { 
    $(this).animate({color:"#666",backgroundColor:"#fff"}, 380) 
    } 
); 

$("#menu li#Q_07").hover(function() { 
    $(this).animate({ backgroundColor:fadeColor2,color:fadeColor1}, 380) 
    }, 
    function() { 
    $(this).animate({color:"#666",backgroundColor:"#fff"}, 380) 
    } 
); 

$("#menu li#Q_09").hover(function() { 
    $(this).animate({ backgroundColor:fadeColor2,color:fadeColor1}, 380) 
    }, 
    function() { 
    $(this).animate({color:"#666",backgroundColor:"#fff"}, 380) 
    } 
); 

$("#menu li#Q_11").hover(function() { 
    $(this).animate({ backgroundColor:fadeColor2,color:fadeColor1}, 380) 
    }, 
    function() { 
    $(this).animate({color:"#666",backgroundColor:"#fff"}, 380) 
    } 
); 

$("#menu li#Q_13").hover(function() { 
    $(this).animate({ backgroundColor:fadeColor2,color:fadeColor1}, 380) 
    }, 
    function() { 
    $(this).animate({color:"#666",backgroundColor:"#fff"}, 380) 
    } 
); 



$("#menu li#Q_02").hover(function() { 
    $(this).animate({ backgroundColor:fadeColor,color:fadeColor1}, 380) 
    }, 

    function() { 
    $(this).animate({color:"#666",backgroundColor:"#fff"}, 380) 
    } 
    ); 

$("#menu li#Q_04").hover(function() { 
    $(this).animate({ backgroundColor:fadeColor,color:fadeColor1}, 380) 
    }, 

    function() { 
    $(this).animate({color:"#666",backgroundColor:"#fff"}, 380) 
    } 
    ); 

$("#menu li#Q_06").hover(function() { 
    $(this).animate({ backgroundColor:fadeColor,color:fadeColor1}, 380) 
    }, 

    function() { 
    $(this).animate({color:"#666",backgroundColor:"#fff"}, 380) 
    } 
    ); 

$("#menu li#Q_08").hover(function() { 
    $(this).animate({ backgroundColor:fadeColor,color:fadeColor1}, 380) 
    }, 

    function() { 
    $(this).animate({color:"#666",backgroundColor:"#fff"}, 380) 
    } 
    ); 

$("#menu li#Q_10").hover(function() { 
    $(this).animate({ backgroundColor:fadeColor,color:fadeColor1}, 380) 
    }, 

    function() { 
    $(this).animate({color:"#666",backgroundColor:"#fff"}, 380) 
    } 
    ); 

$("#menu li#Q_12").hover(function() { 
    $(this).animate({ backgroundColor:fadeColor,color:fadeColor1}, 380) 
    }, 

    function() { 
    $(this).animate({color:"#666",backgroundColor:"#fff"}, 380) 
    } 
    ); 
});

來源

2010-04-26 Nik

把一個A標籤您LI的內線。風格和動畫鏈接，而不是LI s。

來源

2010-04-26 19:24:15

這個樣式應用於列表項目時有點痛苦。我有一個快速嘗試添加一個類與鏈接，但Safari仍然給出了意想不到的結果（間歇）有沒有更簡單的方法？ – Nik 2010-04-26 19:53:15

將CSS更改爲樣式A vs LI應該是微不足道的，而不是痛苦的。 – 2010-04-26 20:02:57

將樣式更改爲A並不痛苦。但是讓A看起來像列表容器是（明智的）。我已經和.addClass一起使用了，因爲Safari瀏覽器和Chrome瀏覽器似乎並不那麼棒。感謝您的輸入。 – Nik 2010-04-27 05:42:39

jQuery懸停在Safari或Google Chrome中不起作用

回答

相關問題