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

Question

我正在对某些列表项实现 jQuery 悬停效果。它在除 Safari 和 Google Chrome（Mac 和 PC）之外的所有浏览器中都能完美运行。由于某种原因，悬停效果在这两个浏览器上不起作用。

这是代码（它还使用 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 )
    }
   );
});

Answer 1

将 A 标签放入 LI 中。设置链接的样式和动画，而不是 LI。