jquery hover not working in safari and chrome

Posted by Nik on Stack Overflow See other posts from Stack Overflow or by Nik
Published on 2010-04-26T19:20:05Z Indexed on 2010/04/26 19:23 UTC
Read the original article Hit count: 630

Filed under:
|
|
|
|

I'm developing a site and I am implementing a jquery hover effect on some list items. It works perfectly in all browser except safari and chrome (mac and pc). For some reason the hover effect doesnt work on those to browsers.

Here is the link link text

I thought I would add the code just in case it helps (it also uses the color_library.js file that can be found in the head of the document).

   $(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 )
    }
   );


});

Thanks for any advice ;)

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about safari