Стили jQuery css не обновляются при определенных условиях

Question

Я провел широкий поиск и не могу найти хороших ответов на эту конкретную проблему.

У меня есть <div> и <a>, которые влияют на стили друг друга при наведении (цвет ссылки меняется и фон div меняется). На странице их несколько.

У меня настоящая проблема с тем, что стили CSS не меняются. Если я быстро переместлю мышь из <a> в <div>, а затем переместлю мышь из <div>, цвет активного состояния ссылки останется прежним, даже если мой компонент отпускания мыши, как <a>, так и <div> hover () имеют операторы для установки цветов ссылок на их значения по умолчанию. Что еще более странно, так это то, что указатели мыши, безусловно, срабатывают (могут отображать alert ()), но команды .css ('color', что угодно) просто не выполняются. Как только цвет «застрянет», как это, независимо от того, куда я перемещаю мышь (за исключением самой застрявшей ссылки), цвет не изменится, даже если все остальное вызывает избыточные события, которые вызывают команды .css для эта ссылка для возврата в неактивное состояние.

Это какой-то освежающий глюк?

Код на самом деле не нужен, но мы в основном говорим о следующем, с другим блоком кода .hover с div [rel] в качестве селектора. Этот код раньше был более элегантным и менее явным, но я просто пытался все, чтобы исправить эту ошибку, вплоть до использования операторов if и явного указания каждого изменения стиля, включая несколько избыточных команд в каждом событии, чтобы отключить все, что застряло (ни один из которых не работает).

$("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)');
  }
  });

Любая помощь очень ценится!

В качестве дальнейшего продолжения, даже возникают проблемы с получением функций .hover () в div изображения для изменения цвета ссылки. В общем, кажется, что единственный способ заставить цвета ссылок работать так, как они должны, - это навести курсор мыши на саму ссылку - каждый раз, когда я запускаю .css-изменение ссылки из другого места, свойство не обновляется .

Answer 1

почему бы вам не сделать это с таблицей стилей? например,

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

CSS: псевдо-селектор hover не имеет почти столько же причуд, сколько onmouseout и onmouseover, и он не зависит от того, включен ли пользователь javascript

РЕДАКТИРОВАТЬ в ответ на комментарий OP

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

и сделайте свой CSS как:

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

это все еще можно оптимизировать больше, но это определенно будет быстрее, чем раньше. Вы все еще сможете обмануть его, перемещая мышь достаточно быстро или уходя, выходя из окна браузера и т. Д. ... Альтернативы становятся беспорядочными (например, при использовании события mousemove)

РЕДАКТИРОВАТЬ 3

При удалении класса, вероятно, более эффективно сделать:

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