Question

我做了一些广泛的搜索，但找不到任何有关此特定问题的好答案。

我有一个<div>和一个<a>，它们会在悬停时影响彼此的样式（链接颜色会发生变化，div背景也会发生变化）。页面上有多组这些。

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

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

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

为什么不用样式表来做这件事？ e.g。

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");

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

1 个答案: