jQuery css样式在某些条件下不更新

Question

我做了一些广泛的搜索,找不到这个具体问题的任何好答案.

我有一个<div>和一个<a>影响对方的悬停样式(链接颜色更改和div背景更改).页面上有多组这些.

我的css样式没有变化,真的遇到了麻烦.如果我快速地将鼠标从鼠标移动<a>到<div>然后将鼠标移开<div>,则链接活动状态颜色保持不变,即使我<a>和<div>hover()的mouseleave组件都有声明将链接颜色设置回他们的默认值.更奇怪的是,mouseleaves肯定会触发(可以显示alert(),但是.css('color',无论如何)命令根本就没有被遵守.一旦颜色像这样被"卡住",无论我在哪里移动鼠标(除了卡住的链接本身),颜色都不会改变,即使其他所有内容都触发了应该发出的.css命令的冗余事件.该链接返回其非活动状态.

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

代码实际上并不是必需的,但我们基本上是在讨论下面的代码,使用div [rel]作为选择器的另一个.hover代码块.这段代码过去更优雅,更不明确,但我一直在尝试修复这个bug,直到使用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的用户

编辑以回应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");