0

可能重复：
如何为一次悬停 3 或 4 个元素创建 javascript 函数

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

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

我在我的 html 文档中使用了 3 次类。当我将鼠标悬停在第一个框集上时，它会显示所有框悬停。但我需要：当我悬停框 1 时，它应该只显示一个框，当我悬停一个框时，它应该只显示框 1，

当我悬停框 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');

});
4

2 回答 2

1

我不确定您要达到的目标。每次只让一个盒子变黄？

这行得通，但我会稍微改变一下标记：

http://jsfiddle.net/wTcTU/19/

$(".box1").mouseenter(function() {
    $(this).parent().next().css("background-color", "yellow");
    $(this).css("background-color", "yellow");
});

$(".box1").mouseleave(function() {
    $(this).parent().next().css("background-color", "white");
    $(this).css("background-color", "white");
});

$(".box4").mouseenter(function() {
     $(this).prev().find(".box1").css("background-color", "yellow");
     $(this).css("background-color", "yellow");
});

$(".box4").mouseleave(function() {
     $(this).prev().find(".box1").css("background-color", "white");
     $(this).css("background-color", "white");
});
于 2013-01-29T16:49:35.687 回答
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/

于 2013-01-29T16:51:16.213 回答