0

I'm implementing a jQuery hover effect on some list items. It works perfectly in all browsers except Safari and Google Chrome (Mac and PC). For some reason the hover effect doesn't work on these two to browsers.

Here's the code (it also uses the color_library.js plugin):

$(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 )
    }
   );
});
henrywright
  • 10,070
  • 23
  • 89
  • 150
Nik
  • 671
  • 1
  • 8
  • 27

1 Answers1

1

Put an A tag inside your LIs. Style and animate the links, not the LIs.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • Thats a little painful as the style is being applied to the list item. I had a quick try at adding a link with a class but safari mac still gave unexpected results (intermittent) Is there no easier way? – Nik Apr 26 '10 at 19:53
  • Changing the CSS to style A vs LI should be trivial, not painful. – Diodeus - James MacFarlane Apr 26 '10 at 20:02
  • Changing the style to an A isn't painful. But making that A look like the the list container is (time wise). I have gone with .addClass as the .hover just seems to be not so great with safari and chrome. Thanks for your input though. – Nik Apr 27 '10 at 05:42