javascript - 如何通过悬停或鼠标悬停同时更改多个（至少两个）不同跨度或div的突出显示颜色？

Question

我正在处理有时具有相互关联的不同部分的文本内容，我想让用户将鼠标悬停/鼠标悬停在任何相关部分上，并相应地以相同的突出显示同时突出所有相关部分颜色。

在将内容生成为 HTML 之前，假设我确实拥有所有关于哪些部分相关的信息（在服务器上），那么最快的方法是什么。即，我可以放入适当的 css 或 javascript 以在每页的基础上临时获得所需的设置。

Answer 1

如果我理解你的问题，这可以很容易地使用 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) */

});​

看我的例子

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

Answer 2

最快的方法是在你的 body 或顶部容器元素上切换一个类，并以这样的方式定义 CSS，使其后代被更正颜色/突出显示等。这将比从关联中的每个元素添加/删除类更快。

例如：如果所有相关元素都有类“rel-1”，那么你可以有一个 CSS 定义，如：

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

并将鼠标悬停在任何带有 class 的元素上rel-1，在 body/container 元素中切换相同的类。

例如：

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

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

等等..