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

Question

我正在處理有時具有彼此相關的不同部分的文本內容，我想讓用戶將鼠標懸停/鼠標懸停在任何相關部分上，並因此用相同的突出顯示部分同時突出顯示所有相關部分顏色。

假設在將內容生成為HTML之前，我確實（在服務器上）具有與哪些部分相關的所有信息，這是最快的方法。 即，我可以放入適當的CSS或javascript，以臨時方式（每頁）獲得所需的設置。

Answer 1

最快的方法是在您的身體或頂部容器元素上切換一個類，並以對其后代進行彩色/突出顯示等方式定義CSS。這比在關聯中的每個元素中添加/刪除類要快。

例如：如果所有相關元素都具有“ rel-1”類，則可以具有如下CSS定義：

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

然后將鼠標懸停在任何具有rel-1類的元素上，即可在body / container元素中切換相同的類。

例如：

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

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

等等..

Answer 2

如果我理解您的問題，則可以使用jquery輕松完成。

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

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) */

});​

見我的例子

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