jQuery CSS 样式在某些情况下不更新

Question

我进行了一些广泛的搜索，但找不到针对这个特定问题的任何好的答案。

我有一个 <div>和一个 <a>在悬停时影响彼此的样式(链接颜色更改和 div 背景更改)。页面上有多组这样的内容。

我遇到了 css 样式未更改的问题。如果我从 <a> 快速移动鼠标到 <div>然后将鼠标从 <div> 上移开，链接事件状态颜色保持不变，即使我的 <a> 的 mouseleave 组件也是如此和 <div> hover()s 具有将链接颜色设置回默认值的语句。更奇怪的是，mouseleaves 肯定会触发(可以让 alert()s 显示)但是 .css('color',whatever) 命令根本不被遵守。一旦颜色像这样“卡住”，无论我将鼠标移到哪里(卡住的链接本身除外)，颜色都不会改变，即使其他一切都触发了应该是冗余事件，这些事件会发出 .css 命令该链接返回其非事件状态。

这是某种令人耳目一新的故障吗？

代码并不是真正必要的，但我们基本上是在讨论下面的内容，以及另一个以 div[rel] 作为选择器的 .hover 代码块。这段代码过去更优雅，更不明确，但我一直在尝试一切来修复这个错误，一直到使用 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)');
  }
  });

非常感谢任何帮助!

作为进一步的后续行动，甚至在图像 div 上获取 .hover() 函数来更改链接颜色时也遇到了麻烦。总的来说，似乎让链接颜色正常工作的唯一方法是将鼠标悬停在链接本身上——任何时候我从其他地方对链接发出 .css 更改时，属性都不会更新.

Answer 1

您为什么不使用样式表来做到这一点？ 例如

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

CSS :hover 伪选择器没有 onmouseout 和 onmouseover 那样多的怪癖，而且它不依赖于启用 javascript 的用户

EDIT 回应 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");