Question

I have a parent DIV that contains three other small DIV’s. I would like to change the background colors of the three child DIV’s when I hover or mouseover the parent DIV. Is it possible to do this in javascript or jquery?

<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

You can do this in CSS as well,

but from what I understand you want to do, this is how you can achieve that in JQuery:

<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>