Question

我正在对某些列表项实现jQuery悬停效果。它适用于除Safari和谷歌浏览器（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 s。

jQuery悬停在Safari或谷歌浏览器中无效

1 个答案: