jQuery css styles not updating under certain conditions

Question

Hi all,

I've done some broad searching and can't find any good answers for this specific problem.

I have a <div> and a <a> that affect each other's styles on hover (the link color changes and the div background changes). There are multiple sets of these on the page.

I'm having real trouble with the css styles not changing. If I move the mouse quickly from the <a> to the <div> and then move the mouse off of the <div>, the link active state color stays the same, even though my mouseleave component of both the <a> and the <div> hover()s have statements to set link colors back to their defaults. What's weirder is that the mouseleaves are certainly triggering (can get alert()s to show) but the .css('color',whatever) commands are simply not obeyed. Once the color is 'stuck' like this, no matter where I move the mouse (with the exception of the stuck link itself) the color will not change, even though everything else is triggering what should be redundant events that issue .css commands to that link to return to its inactive state.

Is this some kind of refreshing glitch?

Code isn't really necessary, but we're basically talking about the below, with another .hover block of code with div[rel] as the selector. This code used to be more elegant and less explicit, but I've just been trying everything to fix this bug, right down to using if statements and explicitly specifying each style change, including several redundant commands at every event to shut off anything that's stuck (none of which are working).

$("a[rel]").hover(function(){
  var therel=$(this).attr('rel');
  if (therel == 'about') {
   $(this).css({'color':'#fb0607'});
   $("a[rel='team']").css({'color':'#999'});
   $("a[rel='projects']").css({'color':'#000'});
   $("a[rel='links']").css({'color':'#666'});
   $("a[rel='contact']").css({'color':'#000'});
   $("div[rel="+therel+"]").css('background','transparent url(assets/img/box1_hover.jpg)');
  }
  else if (therel == 'projects') {
   $(this).css({'color':'#03acef'});
   $("a[rel='about']").css({'color':'#777'});
   $("a[rel='team']").css({'color':'#999'});
   $("a[rel='links']").css({'color':'#666'});
   $("a[rel='contact']").css({'color':'#000'});
   $("div[rel="+therel+"]").css('background','transparent url(assets/img/box2_hover.jpg)');
  }
  else if (therel == 'team') {
   $(this).css({'color':'#e53cdd'});
   $("a[rel='about']").css({'color':'#777'});
   $("a[rel='projects']").css({'color':'#000'});
   $("a[rel='links']").css({'color':'#666'});
   $("a[rel='contact']").css({'color':'#000'});
   $("div[rel="+therel+"]").css('background','transparent url(assets/img/box3_hover.jpg)');
  }
  else if (therel == 'links') {
   $(this).css({'color':'#60a43b'});
   $("a[rel='about']").css({'color':'#777'});
   $("a[rel='projects']").css({'color':'#000'});
   $("a[rel='team']").css({'color':'#999'});
   $("a[rel='contact']").css({'color':'#000'});
   $("div[rel="+therel+"]").css('background','transparent url(assets/img/box4_hover.jpg)');
  }
  else if (therel == 'contact') {
   $(this).css({'color':'#e7470a'});
   $("a[rel='about']").css({'color':'#777'});
   $("a[rel='projects']").css({'color':'#000'});
   $("a[rel='team']").css({'color':'#999'});
   $("a[rel='links']").css({'color':'#666'});
   $("div[rel="+therel+"]").css('background','transparent url(assets/img/box5_hover.jpg)');
  }
  },function(){
  var therel=$(this).attr('rel');
  if (therel == 'about') {
   $(this).css({'color':'#777'});
   $("a[rel='projects']").css({'color':'#000'});
   $("a[rel='team']").css({'color':'#999'});
   $("a[rel='links']").css({'color':'#666'});
   $("a[rel='contact']").css({'color':'#000'});
   $("div[rel="+therel+"]").css('background','transparent url(assets/img/box1.jpg)');
  }
  else if (therel == 'projects') {
   $(this).css({'color':'#000'});
   $("a[rel='about']").css({'color':'#777'});
   $("a[rel='team']").css({'color':'#999'});
   $("a[rel='links']").css({'color':'#666'});
   $("a[rel='contact']").css({'color':'#000'});
   $("div[rel="+therel+"]").css('background','transparent url(assets/img/box2.jpg)');
  }
  else if (therel == 'team') {
   $(this).css({'color':'#999'});
   $("a[rel='about']").css({'color':'#777'});
   $("a[rel='projects']").css({'color':'#000'});
   $("a[rel='links']").css({'color':'#666'});
   $("a[rel='contact']").css({'color':'#000'});
   $("div[rel="+therel+"]").css('background','transparent url(assets/img/box3.jpg)');
  }
  else if (therel == 'links') {
   $(this).css({'color':'#666'});
   $("a[rel='about']").css({'color':'#777'});
   $("a[rel='projects']").css({'color':'#000'});
   $("a[rel='team']").css({'color':'#999'});
   $("a[rel='contact']").css({'color':'#000'});
   $("div[rel="+therel+"]").css('background','transparent url(assets/img/box4.jpg)');
  }
  else if (therel == 'contact') {
   $(this).css({'color':'#000'});
   $("a[rel='about']").css({'color':'#777'});
   $("a[rel='projects']").css({'color':'#000'});
   $("a[rel='team']").css({'color':'#999'});
   $("a[rel='links']").css({'color':'#666'});  
   $("div[rel="+therel+"]").css('background','transparent url(assets/img/box5.jpg)');
  }
  });

Any help is appreciated greatly!

As a further follow-up, there is even trouble getting the .hover() functions on the image divs to change the link colors. In general, it seems the only way I can get the link colors to work as they should is by actually hovering over the link itself -- any time I'm issuing a .css change to the link from elsewhere the property doesn't update.

Answer 1

why wouldn't you do this with a stylesheet? e.g.

a[rel=about] { color:#777; }
a[rel=about]:hover { color:#fb0607; }

CSS :hover pseudo-selector doesn't have nearly as many quirks as onmouseout and onmouseover, and it doesn't rely on the user having javascript enabled

EDIT in response to OP comment

$("a[rel]").hover(function(){
  var therel=$(this).attr('rel');
  $("div[rel]").removeClass("rel_active");
  $("div[rel="+therel+"]").addClass("rel_active";)
});

and make your css like:

div[rel=links].rel_active {
  background: transparent url(assets/img/box3.jpg);
}

it could still be optimized more, but it is definitely going to be faster than before. You're still going to be able to trick it by moving the mouse fast enough or leaving by going out of the browser window, etc... Alternatives get messy (like using the mousemove event)

EDIT 3

When removing the class, it is probably more efficient to do:

  $("div.rel_active").removeClass("rel_active");