Javascript 同时将鼠标悬停在多个Div上，使其看起来像1个Div

我有4个div，每个div都有相同的类，它们在多个其他div的网格中彼此相邻，但是我想要添加悬停效果的div也可以不同，现在是4，但在不同的区域上可以是6或更多或更少

基本上，我希望将鼠标悬停在具有相同类的div上，使它们看起来像一个大div

.divTable{
显示：表格；
宽度：100%；
}
.divTableRow{
显示：表格行；
}
.表格标题{
背景色：#EEE；
显示：表头组；
}
.divTableCell、.divTableHead{
边框：1px实心#999999；
显示：表格单元格；
填充：3x10px；
宽度：40px；
高度：30px；
}
.divTableCellActive{
背景色：红色；
边框：1px纯红；
}
.divTableCell:悬停{
背景颜色：绿色；
}
.表格标题{
背景色：#EEE；
显示：表头组；
字体大小：粗体；
}
.桌脚{
背景色：#EEE；
显示：表尾组；
字体大小：粗体；
}
.表格正文{
显示：表格行组；
}
.盒子{
/*位置：相对位置*/
/*显示：内联块*/
显示：表格单元格；
填充：3x10px；
宽度：40px；
高度：30px；
背景色：#fff；
边界半径：1px；
盒影：0 1px2pRGBA（0,0,0,0.1）；
边界半径：1px；
-webkit过渡：所有0.6s立方贝塞尔（0.165,0.84,0.44,1）；
过渡：所有0.6s三次贝塞尔（0.165,0.84,0.44,1）；
}
.box：：之后{
内容：“；
边界半径：1px；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
宽度：100%；
身高：100%；
盒影：0 1px15px rgba（0,0,0,0.3）；
不透明度：0；
-webkit过渡：所有0.6s立方贝塞尔（0.165,0.84,0.44,1）；
过渡：所有0.6s三次贝塞尔（0.165,0.84,0.44,1）；
}
.box:悬停{
-webkit转换：比例（1.25,1.25）；
变换：比例（1.25,1.25）；
}
.box:悬停：：之后{
不透明度：1；
}

---

尝试使用jQuery

toggleClass

函数添加效果类，然后根据需要自定义它

$（.divTableCellActive”）.hover（函数（）{
$（“.divTableCellActive”）.toggleClass（“效果”）；
});
.divTable{
显示：表格；
宽度：100%；
}
.divTableRow{
显示：表格行；
}
.表格标题{
背景色：#EEE；
显示：表头组；
}
.divTableCell、.divTableHead{
边框：1px实心#999999；
显示：表格单元格；
填充：3x10px；
宽度：40px；
高度：30px；
}
.divTableCellActive{
背景色：红色；
边框：1px纯红；
}
.积极作用{
背景颜色：绿色；
}
.divTableCell:悬停{
背景颜色：绿色；
}
.表格标题{
背景色：#EEE；
显示：表头组；
字体大小：粗体；
}
.桌脚{
背景色：#EEE；
显示：表尾组；
字体大小：粗体；
}
.表格正文{
显示：表格行组；
}
.盒子{
/*位置：相对位置*/
/*显示：内联块*/
显示：表格单元格；
填充：3x10px；
宽度：40px；
高度：30px；
背景色：#fff；
边界半径：1px；
盒影：0 1px2pRGBA（0,0,0,0.1）；
边界半径：1px；
-webkit过渡：所有0.6s立方贝塞尔（0.165,0.84,0.44,1）；
过渡：所有0.6s三次贝塞尔（0.165,0.84,0.44,1）；
}
.box：：之后{
内容：“；
边界半径：1px；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
宽度：100%；
身高：100%；
盒影：0 1px15px rgba（0,0,0,0.3）；
不透明度：0；
-webkit过渡：所有0.6s立方贝塞尔（0.165,0.84,0.44,1）；
过渡：所有0.6s三次贝塞尔（0.165,0.84,0.44,1）；
}
.box:悬停{
-webkit转换：比例（1.25,1.25）；
变换：比例（1.25,1.25）；
}
.box:悬停：：之后{
不透明度：1；
}