如何通過懸停或鼠標懸停同時更改多個（至少兩個）不同跨度或div的突出顯示顏色？

Question

我正在研究有時有不同部分彼此相關的文本內容，我想讓用戶懸停/鼠標懸停任何相關部分，並相應地突出顯示所有相關部分同樣的高亮顏色。

假設我在將內容生成爲HTML之前確實知道（在服務器上）有關哪些部件相關的所有信息，最快的方法是什麼？即我可以放入正確的CSS或JavaScript來獲得所需的安裝程序，每個頁面都是特殊的。

Answer 1

，最快的方式將你的身體上或頂部容器元素被觸發類，並在這樣一種方式，它的後代被糾正有色定義CSS /高亮等，這將是比每個元素添加/刪除類的快在協會裏。

例如：如果所有相關的元素有類「REL-1」，那麼你可以有一個CSS定義，如：

body.rel-1 .rel-1 { 
    background-color: #ddd; 
    /* .. other styles */ 
} 

並懸停在與rel-1類中的任何元素，切換在同一個班身體/容器元素。

例如：

$('.rel-1').mouseover(function() { 
    $(body).addClass('rel-1'); 
}); 

$('.rel-1').mouseout(function() { 
    $(body).removeClass(); 
}); 

等..

Answer 2

如果我明白你的問題，這可以使用jQuery很容易做到。

首先，我將設置具有屬性的html元素。我正在使用thisisfor，你可以使用（almost）任何東西。因此，如果您可以預先確定每個項目在服務器端屬於哪個「組」，則可以使用您選擇的屬性對它們進行分類，然後分類爲「組」。

HTML

<div class="hoverme" thisisfor="group3">What group are we in?</div> 
<div class="hoverme" thisisfor="group3">What group are we in?</div> 
<div class="hoverme" thisisfor="group2">What group are we in?</div> 
<div class="hoverme" thisisfor="group4">What group are we in?</div> 

然後，使用jQuery，您可以設置檢查屬性的懸停事件，在我們的例子中thisisfor屬性：

jQuery的

$("[thisisfor]").hover(function(){ /* anything with 'thisisfor' attribute */ 

    var group = $(this).attr('thisisfor'); /* store its value as variable 'group' */ 

    $("[thisisfor="+ group +"]").html(group); /* all with this group that was hovered....change the text (or whatever your plan is) */ 

});​ 

See my example

但是，是的，可能性是無限的使用屬性...