如何通过悬停或鼠标悬停同时更改多个（至少两个）不同跨度或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) */

});​

见我的例子

但是，是的，使用属性的可能性是无限的...