IE7 Tab Mouseover Firing Adjacent Tab
Thanks for any help/advice on this.
I'm using some techniques cobbled together from this tutorial:
http://www.alistapart.com/articles/sprites2
Using Jquery, I am trying to build a navigation that reacts to
mouseover events by displaying a hidden graphic which overlays the
dead state navigation bar. I've got it working just great in Safari,
Firefox, etc, but of course it breaks in IE7. When you mouseover a tab
in IE7, the tab you are mousing over fires, but so does the tab
immediately to the left. I haven't been able to figure this out. I
don't think it is caused by event bubbling, but then I'm not sure.
The test site can be seen here:
http://dev.pequod.com/brachy/
Again, this breaks only in IE7.
The jquery code is this:
$(document).ready(function(){
var cur_page=$('body').attr('id');
// show the tab for the current page
$('.nav-'+cur_page+'-on').show();
function attachNavEvents(myid) {
$('#'+myid+'lnk').mouseover(function(){
if (myid!=cur_page){
if ($.browser.msie) $('.nav-'+myid+'-
on').show();
else $('.nav-'+myid+'-
on').fadeIn(500);
}
});
$('.nav-'+myid+'-on').mouseout(function(){
if (myid!=cur_page) {
$('.nav-'+myid+'-on').slideUp(200);
}
}).mousedown(function(){
switch(myid) {
case 'home':
window.location='index.php'; break;
case 'serv':
window.location='services.php'; break;
case 'trai':
window.location='training.php'; break;
case 'abou':
window.location='aboutus.php'; break;
case 'cont':
window.location='contactus.php'; break;
default: window.location='index.php';
break;
}
});
} // attachEvents
attachNavEvents("home");
attachNavEvents("serv");
attachNavEvents("trai");
attachNavEvents("abou");
attachNavEvents("cont");
});