Hi, I'm working on getting what should be a simple rollover effect done in jquery, and it works like a charm in firefox and safari, but IE is not having any of it.
the page in question is here: http://www.awayfromkeyboard.com/nymphomania/ here's the relevant code: jQuery: $(document).ready(function(){ $("#trigger_news").mouseover( function () { $ ("#news").addClass("news_on"); }); $("#trigger_news").mouseout( function () { $ ("#news").removeClass("news_on"); $("#news").addClass("news"); }); }); CSS: #trigger_news { position:absolute; top:133px; left:237px; z-index:3; width:138px; height:33px; } .news { position: absolute; top:103px; left:237px; width:323px; height: 132px; z-index:2; display: none; } .news_on { position: absolute; top:103px; left:237px; width:323px; height:132px; z-index:2; display: block; background-image:url('event- states/news.jpg'); } HTML: <DIV ID="trigger_news"></DIV> <DIV ID="news" CLASS="news"></DIV> the problem seems to be that the layered divs I'm using to capture the user's mouseover event are empty, and IE is very unhappy about it. Put some text in there, and IE will accept that if you're hovering over the text specifically, but nowhere else. Put a giant border on the DIV, IE will respond when you hover over the border. Putting an image in there gets it to behave appropriately, but transparent pngs or gifs won't work, since IE5.5/6 doesn't support image transparency on any z- index other than 0 (at least to my knowledge). I could make images of the four navigation items as well as hover states for each, but it's already a pretty heavy site in terms of filesize and that generally strikes me as a bit sloppy. I've also tried capturing the events with image maps, and IE likes this a little bit better in that it will sometimes display the image I want, but overall the results from that approach were unreliable and flaky. any ideas/suggestions on another solution, or something I'm missing in regards to this one?
