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中不起作用

回答

相关问题