Safari issue displaying/hiding content
I have enabled a hover() event on a DIV that includes an H2 element that is always displayed and a child DIV that needs to be shown/hidden. This code works wonderfully on Firefox and IE. However, it's not working in Safari (I have not tested Opera or Chrome yet)
Here's my (very simple) code:
- jQuery("div.category-text").css("display","none");
jQuery("div.category-item").hover(
function() {
/* jQuery(this).find("div.category-text").stop(true, true).show("slow"); */
jQuery(this).find("div.category-text").css("display", "block");
},
function() {
/*jQuery(this).find("div.category-text").stop(true, true).hide();*/
jQuery(this).find("div.category-text").css("display", "none");
}
);
I've tried all the "Safari workaround solutions" I've seen posted. I have:
- moved the jQuery code below the content on the page
- added a jQuery(document).ready() statement around it (then removed it; didn't help)
- changed the show() and hide() methods to css() methods to display the child div
- I have removed "display: none;" from my CSS definition and placed it inline
I swear I must be blind and the reason this isn't working on Safari is (hopefully) something I'm just not seeing. Could someone help point me in the right direction as to what I might be missing here?
Here's a pointer to page where it's not working. Hover over any of the links in the content area of the page, and the text underneath it should show.
jQuery version: 1.4.2
Safari version: 5.0.1
Your help would be greatly appreciated.
Kath