javascript - 使用相同的类，使用 javascript 一次悬停 3 个项目

Question

Possible Duplicate:
How to create javascript function for hovering 3 or 4 element at a time

我想一次悬停 3 个元素。当我将光标放在其中之一时。它应该悬停在其他两个项目上。我想用 JavaScript 来做到这一点。 请看这个:

http://jsfiddle.net/Taslimkhan/wTcTU/14/

我在 html 文档中使用了 3 次类。当我将鼠标悬停在第一个框上时，设置它显示所有框悬停。 但是我需要: 当我将鼠标悬停在框 1 上时，它应该只显示 A 框，而当我将鼠标悬停在 A 框上时，它应该只显示 box1，

当我将鼠标悬停在框 2 上时，它应该只显示 B 框，而当我将鼠标悬停在 B 框上时，它应该只显示框2，

第三组盒子也应该有同样的行为。

我不能两次使用同一个类。但我想使用同一个类。一次又一次。但我该怎么做呢？请帮助我。

有我使用过的代码:

$(document).ready(function(){
// box 1
$('.box1').mouseover(function(){
    $('.box1').css('background-color', '#F7FE2E');
    $('.box4').css('background-color', '#F7FE2E');
    $('.hov').css('color', '#0f0');

});
$('.box1').mouseout(function(){
    $('.box1').css('background-color', '#FFF');
    $('.box4').css('background-color', '#FFF');
    $('.hov').css('color', '#fff');

});

Answer 1

这是我的变体:

var $boxes = $('.box');
$boxes.hover(function() {
    $boxes.filter('.' + $(this).data('set')).addClass('active');
}, function() {
    $boxes.filter('.' + $(this).data('set')).removeClass('active');
});

我删除了不必要的代码重复，并使用data-set属性来引用需要突出显示的相应框。

我还鼓励您不要使用 .css 方法来设置 HTML 样式。您应该使用 CSS 类来使代码更简洁。

http://jsfiddle.net/dfsq/wTcTU/21/