如何创建一次hover3或4个元素的javascript函数

我想一次hover3个项目。 当我把光标放在其中一个。 它应该hover其他两个项目。 请帮助我任何人。 我想用javascript做到这一点。 我做了一个模型，但它并不好。 我想使用function，所以我可以一次又一次地使用它。 请帮我。

     .boxes { float: left; display: inline; width:150px; height:100px } .box1 { width:50px; padding:10px; border:1px solid gray; margin:0px; height: 20px; } .box4 { display: inline-block; width:150px; padding:10px; border:1px solid gray; height: 100px; }   $(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'); }); $('.box4').mouseover(function(){ $('.box4').css('background-color', '#F7FE2E'); $('.box1').css('background-color', '#F7FE2E'); $('.hov').css('color', '#0f0'); }); $('.box4').mouseout(function(){ $('.box4').css('background-color', '#FFF'); $('.box1').css('background-color', '#FFF'); $('.hov').css('color', '#fff'); }); });   
 
Box 1
 
 
box4 
 
 
 
Box 1
 
 
box4 
   

Answer 1

如果按父div对div进行分组，则可以使用HTML结构来确定要突出显示的内容。 我不知道你的确切用法模型，但是这样的：

 
 
 
Link
 
 
 
 
Link
  

然后在你的jQuery中：

 $(document).on('mouseover', '.hover', function () { var boxgroup = $(this).closest('.boxgroup'); boxgroup.find('.hover').addClass('hovercolor'); boxgroup.find('.hov').css('color', '#0f0'); }).on('mouseout', '.hover', function () { var boxgroup = $(this).closest('.boxgroup'); boxgroup.find('.hover').removeClass('hovercolor'); boxgroup.find('.hov').css('color', '#000'); }); 

在这里，我使用.closest()来查找div所在的组，然后突出显示该组中的所有其他.hover项。

例：

http://jsfiddle.net/jtbowden/HZtVP/3/

如果您希望您的div不进行物理分组，还有其他方法可以执行您想要的操作。

Answer 2

1. 使用映射javascript对象。

2. 并使用类’like’选择器将函数绑定到具有以“.box”开头的类的元素

例如：

 $(document).ready(function(){ var mapping = { 'box1':'box4','box4':'box1' }; $("[class^=box]").mouseover(function(){ ......... });