jquery - 別の 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

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

jsフィドル

だから、私が達成したいと思っているのは、「hovered_div」がマウスでホバーされると、その div のホバー状態になり、他の 3 つの div が適用され、マウスが離れると、それらはすべて元に戻ります正常。</p>

誰でも私を助けることができますか？

Answer 1

:hover の代わりに css クラスを使用することをお勧めします。これにより、マウスオーバーおよびマウスアウト時にクラス属性を設定できます。JS フィドルの例

$('#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効果は子要素にのみ適用できます。