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

Question

我正在寻找一种方法，当鼠标悬停在另一个 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>​​​​​​​​​​​​​​​​​​​​​​   

jsFiddle

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

谁能帮帮我？

Answer 1

我建议使用 css 类而不是 :hover。这将允许您在鼠标悬停和鼠标移出时设置类属性。 JS Fiddle Example

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

$('#hovered_div').mouseout(function() {
 $('#div1').attr('class','');
    $('#div2').attr('class','');
      $('#div3').attr('class','');

});

您必须将您的 css 更改为以下内容（将 ':hover' 更改为 '.hover'）

#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');

});

Answer 2

:hover 效果只能应用于子元素。