Mousover Elternteil DIV, um Kind DIV Hintergründe zu ändern

Question

Ich habe ein Eltern-DIV, das drei andere kleine DIV enthält. Ich möchte die Hintergrundfarben der drei Kind-DIVs ändern, wenn ich den Eltern-DIV schwebe oder über den Mauszeiger drehe. Ist es möglich, dies in Javascript oder Jquery zu tun?

<div id="r1"> //Mousover 

<div class="bx"></div> //Change background color 
<div class="bx"></div> //Change background color 
<div class="bx"></div> //Change background color 

</div> 

Answer 1

Sie können dies auch in CSS tun,

aber von dem, was ich verstehe, was Sie tun wollen, ist dies, wie Sie das in JQuery erreichen können:

<div id="r1" onmouseover='changeBg(this);' onmouseout='revertBg(this);'> //Mousover 

    <div class="bx"></div> //Change background color 
    <div class="bx"></div> //Change background color 
    <div class="bx"></div> //Change background color 

</div> 

<script type='text/javascript'> 
    function changeBg(div){ 
     $(div).children('.bx').attr('background-color', '#AAAAAA'); 
    } 
    function revertBg(div){ 
     $(div).children('.bx').attr('background-color', '#BBBBBB'); 
    } <script> 

Answer 2

Sie brauchen nicht diese mit Javascript zu tun, können Sie einfach CSS

div#r1:hover div.bx{ background-color: red; } 

Answer 3

diese in Ihre javascript:

$('#r1').hover(function(){ $(this).addClass('r1hovered'); }); 

Und fügen Sie das zu Ihrem CSS:

.r1hovered .bx { background-color: red; } 

Quelle: http://api.jquery.com/hover/