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

Question

I'm working on text content that sometimes has different parts being related to each other, and I'd like to let user hover/mouseover any of the related parts, and accordingly highlight all the related parts at the same time with the same highlight color.

What's the quickest way to do this, assuming that I do have all the information (on the server) regarding which parts are related, prior to generating the content into HTML. Ie I can put in the proper css or javascript to get the needed setup in ad hoc, per page basis.

Answer 1

The fastest way would be toggling a class on your body or a top container element and defining the CSS in such a way that it descendants are corrected colored/highlighted etc. This will be faster than adding/removing classes from each element in the association.

For example: if all related elements have the class "rel-1" then you can have a CSS definition like:

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

And on hover over any element with class rel-1 , toggle the same class in the body/container element.

For example:

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

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

and so on..

Answer 2

If I understand your question, this can be done using jquery pretty easily.

First, I'd set up html elements with attributes. I'm using thisisfor , you can use ( almost ) anything. So if you can predetermine which 'group' each item belongs to on the server side, you can classify them with an attribute of your choice, and then whatever 'group'.

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>

Then, using jquery, you can set up a hover event that checks an attribute, the thisisfor attribute in our case:

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

But, yea, the possibilities are endless using attributes...