Jquery 当另一个div悬停时，将悬停状态应用于多个div

我正在寻找一种方法，当鼠标悬停在另一个div上时，将悬停状态应用于我页面上的一组div

希望这段代码能更好地解释我需要什么

CSS
​#hovered_div {
position:absolute;
width:50px;
height:50px;
margin-top:25px;
margin-left:25px;
background-color:blue;   
}
#hovered_div:hover {
background-color:red;   
}

#div1 {
position:absolute;
width:50px;
height:50px;
margin-top:100px;
margin-left:100px;
background-color:yellow;   
}
#div1:hover {
background-color:green;
width:75px;    
}

#div2 {
position:absolute;
width:50px;
height:50px;
margin-top:100px;
margin-left:25px;
background-color:pink;   
}
#div2:hover {
background-color:black;
height:250px;    
}

#div3 {
position:absolute;
width:50px;
height:50px;
margin-top:25px;
margin-left:100px;
background-color:purple;   
}
#div3:hover {
background-color:grey;
width:150px;    
}

HTML

​<div id="hovered_div"></div>
​<div id="div1"></div>
​<div id="div2"></div>
​<div id="div3"></div>​​​​​​​​​​​​​​​​​​​​​​   

CSS
​#悬停分区{
位置：绝对位置；
宽度：50px；
高度：50px；
边缘顶部：25px；
左边距：25px；
背景颜色：蓝色；
}
#悬停分区：悬停{
背景色：红色；
}
#第一组{
位置：绝对位置；
宽度：50px；
高度：50px；
边缘顶部：100px；
左边距：100px；
背景颜色：黄色；
}
#第1部分：悬停{
背景颜色：绿色；
宽度：75px；
}
#第二组{
位置：绝对位置；
宽度：50px；
高度：50px；
边缘顶部：100px；
左边距：25px；
背景颜色：粉红色；
}
#第2部分：悬停{
背景色：黑色；
高度：250px；
}
#第三组{
位置：绝对位置；
宽度：50px；
高度：50px；
边缘顶部：25px；
左边距：100px；
背景颜色：紫色；
}
#第3部分：悬停{
背景颜色：灰色；
宽度：150px；
}
HTML
​
​
​
​​​​​​​​​​​​​​​​​​​​​​​   

所以，我希望实现的是，当鼠标悬停“hovered_div”时，该div的悬停状态，其他三个div被应用，当鼠标移动时，它们都会恢复正常。 ​

---

有人能帮我吗？

：hover

效果只能应用于子元素。

我建议使用css类而不是：hover。这将允许您在mouseover和mouse out上设置class属性

您必须将css更改为以下内容（更改“：hover”更改为“.hover”）

修改了同样的做法

$("#hovered_div").mouseover(function() {
    $('#div1').attr('class', 'hover');
    $('#div2').attr('class', 'hover');
    $('#div3').attr('class', 'hover');
}).mouseout(function() {
    $('#div1').removeClass('hover');
    $('#div2').removeClass('hover');    
    $('#div3').removeClass('hover');

});

---

只需使用

.hover（inFunction，outFunction）

方法，并使用

.css（“propery”，“value”）

应用样式。因为每件事都在做一些不同的事情，所以没有真正聪明的方法来应用这些风格或类似的东西@jcalonso-效果很好，谢谢！正是我想要的，我还可以保留：hover部分以允许div独立运行，然后保留.hover部分以用于分组的悬停状态。谢谢实际上，使用.hover（function（）似乎效率更高。就像在jcalonso的JSFIDLE中一样。但是使用类而不是：hoveragreed…我没有意识到有一个.toggleClass

#div1.hover {
 background-color:green;
width:75px;    
}

$("#hovered_div").mouseover(function() {
    $('#div1').attr('class', 'hover');
    $('#div2').attr('class', 'hover');
    $('#div3').attr('class', 'hover');
}).mouseout(function() {
    $('#div1').removeClass('hover');
    $('#div2').removeClass('hover');    
    $('#div3').removeClass('hover');

});