jQuery css樣式在某些情況下不更新

Question

我已經做了一些廣泛的搜索，找不到任何針對此特定問題的好答案。

我有一個<div>和<a>，影響對方的懸停樣式（鏈接顏色變化和div背景變化）。這些頁面上有多組這些內容。

我遇到了麻煩，css樣式沒有改變。如果我將鼠標從<a>快速移動到<div>，然後將鼠標移出<div>，則鏈接活動狀態顏色保持不變，即使我的mouseleave組件（<a>和<div> hover（）都有語句將鏈接顏色設置恢復爲其默認值。更奇怪的是，mouseleaves肯定是觸發的（可以顯示alert（）來顯示），但.css（'color'，whatever）命令根本不被遵守。一旦顏色「卡住」這樣，無論我移動鼠標的位置（除了卡住的鏈接本身），顏色都不會改變，即使其他所有內容都觸發了應該發出.css命令的冗餘事件該鏈接返回到其非活動狀態。

這是一種令人耳目一新的故障？

代碼並不是真的需要，但我們基本上是在談論下面的內容，另一個代碼塊是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

爲什麼不用樣式表做這件事？ 例如

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

CSS：hover僞選擇不具有幾乎同樣多的怪癖和鼠標移開的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); 
} 

它仍然可以優化更多，但肯定會比以前更快。您仍然可以通過快速移動鼠標或通過離開瀏覽器窗口等方式來欺騙它。替代會導致混亂（如使用鼠標移動事件）

編輯3

拆卸時類，它可能是更有效地做：

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